Если вы разработчик в экосистеме Windows, подсистема Windows для Linux - отличный инструмент, доступный там. Если вы фронтенд-разработчик в Windows и большинство инструкций в интерфейсе командной строки для разработки на JavaScript объясняются в оболочках на базе Linux. Это немного сбивает с толку, иногда вы вводите команду оболочки в командной строке, и ничего не работает. Так что, если бы вы могли настроить WSL в Windows и использовать оболочку на основе Ubuntu для своей разработки? И в то же время используйте свои любимые инструменты Windows для разработки.
В этой статье я остановлюсь на:
- Установите и настройте последнюю версию WSL (образы Ubuntu 18.04 LTS)
- Установите и настройте VS Code для связи с WSL
- Установите NodeJS внутри WSL
- Создайте проект ReactJS и выполните его в WSL или в терминале из VS Code.
Давайте начнем
Установить WSL в Windows 10
Сделать это можно, выполнив несколько простых шагов. Нажмите Windows Key + S, откройте панель поиска и введите «Функции Windows».
Нажмите «Включение или отключение компонентов Windows».
Выберите Подсистема Windows для Linux и нажмите ОК. (Это потребует перезапуска Windows, чтобы все было установлено). После этого откройте приложение Windows Store и найдите Ubuntu.
Вы получите Ubuntu 18.04 LTS в Магазине Windows, а затем нажмите «Установить».
После установки нажмите кнопку Запустить. Вы впервые видите этот экран, который потребует вашего внимания для завершения установки. Нажмите любую клавишу и подождите несколько секунд.
Наконец, вам нужно будет указать имя пользователя и пароль для завершения установки. Теперь все в порядке. Сделаем быструю проверку в оболочке.
$ lsb_release -a
Выполнив указанную выше команду, вы получите результат того, что у вас есть.
Отлично, давайте установим VS Code
Установка VS Code и настройка
Посетите этот веб-сайт и загрузите VS Code
Загрузите последнюю сборку и установите ее на свой компьютер.
Теперь откройте VS Code. VS Code должен автоматически обнаружить вашу установку WSL и предложить расширение.
Если нет, вы можете щелкнуть вкладку «Расширения» в VS Code. Найдите «Удаленный WSL» и установите.
Отлично, мы выполнили настройку VS Code. Закройте VS Code и вернитесь в приложение терминала WSL.
Введите следующую команду
$ code .
Эта команда откроет VS Code из WSL. Если это первый раз, сервер будет настроен для связи между WSL и VS Code. Это делается автоматически, и вам не о чем беспокоиться.
Откроется Visual Studio Code, в котором будет указано, что он успешно подключен к серверу в WSL.
Когда вы откроете терминал из VS Code, вы увидите терминал bash в WSL.
Установка NodeJS (10.x)
Теперь вернитесь в приложение WSL. Внутри командной оболочки введите следующую команду и нажмите ввод
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
А потом
$ sudo apt-get install -y nodejs
Это установит NodeJS 10.x в вашу систему. И чтобы проверить вашу установку, введите следующую команду.
node --version
И вы должны получить такой результат.
Создание и тестирование приложения ReactJS
Теперь в приложении WSL. Введите следующую команду
$ npx create-react-app helloworld
Это создаст приложение ReactJS.
Теперь перейдите в каталог helloworld.
$ cd helloworld
Введите и выполните следующую команду
$ code .
VS Code должен открываться с вашим текущим проектом ReactJS и подключаться к серверу, который общается с VS Code.
Теперь откройте окно терминала и введите следующую команду
$ npm start
Это откроет ваш браузер Windows по умолчанию с запущенным приложением React.
Замечательно, не правда ли.
Удачного кодирования !!!
ОЙ !!! Я написал еще одну историю, как настроить здесь структуру LAMP.
