Простая установка подсистемы Windows для Linux (WSL), позволяющая создавать приложения за считанные минуты

В предыдущем блоге я поделился некоторыми замечательными онлайн-площадками, чтобы быстро запустить среду разработки. Но всем нам в какой-то момент нужна локальная установка.

Разработка с окнами не так уж велика. При работе с большими проектами для некоторых вещей приходится использовать Linux. Для этого нам понадобится виртуальная машина и дистрибутив Linux. Но Windows представила подсистему Windows для Linux (WSL), чтобы мы могли делать вещи Linux внутри Windows.

В этом блоге давайте настроим среду веб-разработки для создания приложений производственного уровня.

Внешний интерфейс

Настройка инструментов внешнего интерфейса, таких как редактор, браузер и т. д.

Настройка VSCode

Visual Studio Code на сегодняшний день является лучшим редактором кода для фронтенд-разработки. Итак, давайте установим его отсюда (https://code.visualstudio.com)

Рекомендуемые расширения:

• Тег автоматического переименования [#] (https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

• Украсить [#] (https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)

• ESLint [#] (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

• Prettier — средство форматирования кода [#] (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

• Babel JavaScript [#] (https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)

Необязательные расширения:

• Предварительный просмотр изображения [#] (https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

• Подсветка цветом #

• Тема значков материалов [#] (https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

Браузер

Рекомендуемый браузер для отладки JavaScript — Google Chrome

Рекомендуемый браузер для дизайна и CSS — [версия Firefox для разработчиков] (https://www.mozilla.org/en-US/firefox/developer)

Этот браузер — идеальное оружие для всего, что связано с дизайном.

Некоторые основные функции, которые мне нравятся в этом:

• Редактор стилей — Firefox упростил быстрое тестирование CSS с помощью редактора стилей. Вы можете написать весь CSS для элемента в этом редакторе и, если вас все устраивает, просто скопируйте и используйте его в своем проекте. Таким образом, вам не нужно перезагружать страницу каждый раз, когда вы вносите изменения в свой CSS.

• Визуальное редактирование — Firefox создал этот инструмент, чтобы помочь аниматорам и визуальным дизайнерам.

Рекомендуемые расширения браузера-

• Отладка CSS [#] (https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj)

• JSON Viewer Pro [#] (https://chrome.google.com/webstore/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc)

Бэкенд

Для серверной части VSCode подходит для небольших проектов. А вот для больших проектов Jet brains IDE будут полезны.

Настройка WSL2

Подсистема Windows для Linux (WSL) — это функция, представленная Windows для работы с Linux внутри Windows. WSL2 — это более быстрая версия WSL1 с дополнительными функциями. Это не симуляция, это настоящее ядро ​​Linux внутри Windows.

Требования:

• Вы должны использовать Windows 10 версии 2004 и выше (сборка 19041 и выше) или Windows 11.

Чтобы установить WSL:

1. Убедитесь, что ваши обновления Windows выполнены

1. Откройте Powershell и запустите

``` ударить

wsl --установить

1. Теперь вам нужно включить функцию WSL, для этого

• В строке поиска введите «Включение или отключение компонентов Windows».

• Найдите «Подсистема Windows для Linux» и включите ее, установив флажок.

• Теперь перезапустите. Вот и все, теперь мы включили WSL. Совет. В качестве альтернативы вы можете просто запустить эту команду.

``` ударить

dism.exe/online/enable-feature/featurename:Microsoft-Windows-Subsystem-Linux/all/norestart

Теперь нам нужно загрузить дистрибутив Linux для использования с WSL. Вы можете установить любой дистрибутив, но я рекомендую Ubuntu, потому что он имеет специальную поддержку. Чтобы установить дистрибутив Ubuntu,

1. Откройте поиск в магазине Microsoft для «Ubuntu 20.04.4» -> нажмите «Получить» -> Установить

Обновление до WSL2

Для обновления просто запустите эту команду,

``` ударить

wsl --set-version <имя дистрибутива> 2

Замените <distro-name> на свой дистрибутив. В нашем случае

``` ударить

wsl --set-версия Ubuntu-20.04.4 2

Совет: Если вы хотите просмотреть файловую систему Windows. Вы должны смонтировать каталог.

``` ударить

$ компакт-диск ~

$ кд /млн/с

Вот и все! Теперь вы можете делать все классные вещи Linux внутри Windows.

Необязательный

• Терминал Windows # — с помощью терминала Windows вы можете открывать разные экземпляры разных терминалов, например вкладки браузера.

• Oh my zsh # - Если вы хотите быть круче, то можете использовать zsh и установить это.

• Remote — WSL # — это расширение VSCode для открытия WSL во встроенном терминале.

Docker и рабочий стол Docker

Docker — это инструмент для простого создания, доставки и обмена программным обеспечением. Широко используется в крупных проектах. Но это может не иметь смысла для небольших проектов.

Заключение

Вот и все! Этой настройки достаточно для создания полнофункциональных веб-сайтов.

Также опубликовано здесь