Перенос разработки JavaScript на Bash в Windows

Опубликовано: 2022-03-10
Краткое резюме ↬ Любите свой терминал Bash, но также любите свой компьютер? Возможно, вы уже присматривались к новому оборудованию Surface, но не можете переключиться на него без терминала. Теперь у вас есть Windows и Bash. В этой статье мы подробно рассмотрим, как настроить окно разработки Windows/Linux для разработки JavaScript.

Я из тех людей, которые не могут жить без терминала Bash. Этот единственный факт усложнил мне работу с интерфейсом в Windows. Я работаю в Microsoft и у меня Mac. Только когда несколько лет назад вышла новая линейка аппаратного обеспечения Surface, я понял: мне нужен один из них .

Так что я получил один. Точнее, Surface Book 2 под управлением Windows 10. Я готовлю эту статью об этом прямо сейчас. А что насчет моей милой, милой подсказки Bash? Ну, я привез его с собой, конечно.

В этой статье я подробно расскажу о том, как новая технология в Windows 10 позволяет вам запускать полноценный терминал Linux в Windows. Я также покажу вам свою потрясающую настройку терминала (которую я назвал «лучшей из когда-либо существовавших») и как вы тоже можете настроить свою собственную машину для разработки Windows/Linux.

Если вы давно мечтали об оборудовании Surface, но не можете жить без терминала Linux, вы обратились по адресу.

Примечание . На момент написания этой статьи многие элементы в этой статье потребуют от вас использования или переключения на «предварительные» или «инсайдерские» сборки различных элементов, включая Windows. Большинство из этих вещей будут в основной сборке Windows в какой-то момент в будущем.

Еще после прыжка! Продолжить чтение ниже ↓

Подсистема Windows для Linux (WSL)

Подсистема Windows для Linux или «WSL» — это то, что позволяет запускать Linux в Windows. Но что же это за безумная наука?

WSL в его нынешнем воплощении представляет собой уровень трансляции, который преобразует системные вызовы Linux в системные вызовы Windows. Linux работает поверх WSL. Это означает, что для установки Linux на Windows вам нужно сделать три вещи:

  1. Включите WSL,
  2. Установить линукс,
  3. Всегда включайте три элемента в список.

Как оказалось, этот слой перевода немного медленный — вроде того, как я пытаюсь вспомнить, нужно ли мне splice или slice . Это особенно верно, когда WSL выполняет чтение и запись в файловую систему. Это большая проблема для веб-разработчиков, поскольку любая правильная npm install скопирует на ваш компьютер тысячи файлов. Я имею в виду, не знаю, как вы, но я не собираюсь закрывать свои собственные струны.

Версия 2 WSL — это отдельная история. Это значительно быстрее, чем текущая версия, поскольку использует ядро ​​виртуализации в Windows вместо уровня трансляции. Когда я говорю «значительно быстрее», я имею в виду намного, намного быстрее. Например, так же быстро, как я, гуглил «сращивание против среза».

По этой причине я собираюсь показать, как установить WSL 2. На момент написания этой статьи для этого потребуется, чтобы вы использовали инсайдерскую сборку Windows.

Перво-наперво: следуйте этому краткому руководству, чтобы включить WSL в Windows 10 и проверить номер версии Windows.

После его установки нажмите клавишу Windows и введите «windows Insider». Затем выберите «Настройки программы предварительной оценки Windows».

Параметр меню настроек программы предварительной оценки Windows
(Большой превью)

У вас будет несколько вариантов того, в каком «кольце» вы хотите участвовать. Многие люди, которых я знаю, находятся на быстром кольце. Хотя я человек осторожный. В детстве я спускался с горки на детской площадке на животе, держась за борта. Вот почему я остаюсь на медленном кольце. Я пользуюсь ею уже несколько месяцев и считаю, что она не более разрушительна и нестабильна, чем обычная Windows.

Это хороший вариант, если вам нужен WSL 2, но вы не хотите умереть на слайде.

Экран настроек программы предварительной оценки Windows, показывающий кольцо «Медленно»
(Большой превью)

Примечание . После публикации этой статьи я узнал, что WSL 2 на самом деле не находится на медленном кольце. Вам нужно быть на быстром кольце, чтобы получить его. В какой-то момент в процессе написания этой статьи я, должно быть, был на быстром кольце. Так быстро кольцо это. Удачи на слайде!

Затем вам нужно включить функцию «Платформа виртуальной машины» в Windows, которая требуется для WSL версии 2. Чтобы перейти к этому экрану, нажмите клавишу Windows и введите «функции Windows». Затем выберите «Включить или отключить компоненты Windows». Выберите «Платформа виртуальной машины». Параметр «Подсистема Windows для Linux» уже должен быть включен.

Экран «Возможности Windows» с выделенными «Платформа виртуальной машины» и «Подсистема Windows для Linux».
(Большой превью)

Теперь, когда WSL включен, вы можете установить Linux. Вы делаете это, как ни странно, прямо из Магазина Windows. Только в 2019 году я бы предложил вам «установить Linux из магазина Windows».

Есть несколько разных дистрибутивов на выбор, но Ubuntu будет наиболее поддерживаемым среди всех инструментов, которые мы настроим позже, включая VS Code. Все инструкции, которые идут отсюда, предполагают установку Ubuntu. Если вы устанавливаете другой дистрибутив, все ставки отключены.

Найдите «Ubuntu» в Магазине Windows. На выбор будет три: Ubuntu, Ubuntu 18.04 и Ubuntu 16.04. Ubuntu действительно нравится номер младшей версии 04, не так ли?

Пункт «Ubuntu» в Магазине Windows
(Большой превью)

Дистрибутив «Ubuntu» (первый на этом снимке экрана) — это «мета-версия», а точнее заполнитель, который просто указывает на последнюю версию. На данный момент это 18.04.

Я выбрал мета-версию, потому что позже я покажу вам, как просматривать файловую систему Linux с помощью проводника Windows, и это немного запутанно, когда в качестве имени диска используется «Ubuntu 18.04», а не просто «Ubuntu».

Эта установка выполняется довольно быстро, в зависимости от вашего интернет-соединения. Это всего около 215 мегабайт, но у меня здесь гигабитное соединение, а как узнать, есть ли у кого-то гигабитное соединение? Не волнуйтесь, они вам скажут.

После установки у вас появится приложение «Ubuntu» в меню «Пуск».

Ubuntu установлен и отображается в меню «Пуск» Windows
(Большой превью)

Если вы нажмете на это, вы получите терминал Bash!

Терминал Ubuntu, работающий в Windows
(Большой превью)

Найдите минутку, чтобы насладиться чудом техники.

По умолчанию вы будете работать в WSL версии 1. Для обновления до версии 2 вам потребуется открыть терминал PowerShell и выполнить команду.

Нажмите клавишу «Windows» и введите «Powershell».

Пункт «Powershell» в меню «Пуск»
(Большой превью)

В терминале PowerShell вы можете увидеть, какая у вас версия WSL, выполнив wsl --list --verbose .

Составление подробного списка всех экземпляров WSL, запущенных из Powershell.
(Большой превью)

Если вы показываете версию 1, вам нужно выполнить команду --set-version и указать имя экземпляра (Ubuntu) и нужную версию (2).

 wsl --set-version Ubuntu 2 
Установка версии WSL на версию 2 с помощью Powershell
(Большой превью)

Это займет немного времени, в зависимости от того, сколько мяса есть в вашей машине. У меня ушло «несколько минут», плюс-минус. Когда это будет сделано, вы будете использовать последнюю и лучшую версию WSL.

Это ваш мозг в Linux… в Windows.

Линукс это не винда. WSL — это не командная строка bash поверх операционной системы Windows. Это полноценная операционная система со своей собственной структурой папок и установленными приложениями. Если вы устанавливаете Node с помощью установщика Windows, ввод node в Linux приведет к ошибке, поскольку Node не установлен в Linux. Он установлен на Windows.

Однако истинное волшебство WSL заключается в том, как он беспрепятственно соединяет Windows и Linux, так что они выглядят как одна файловая система на вашем компьютере.

Навигация по файлам и папкам

По умолчанию терминал Ubuntu перебрасывает вас в домашний каталог Linux (или /home/your-user-name ). Вы можете перейти на сторону Windows, перейдя в /mnt/c .

Терминал Ubuntu с перечисленным содержимым диска C
(Большой превью)

Обратите внимание, что здесь запрещены некоторые разрешения. Мне пришлось бы щелкнуть правой кнопкой мыши значок Ubuntu и выбрать «Запуск от имени администратора», чтобы получить доступ к этим файлам. Вот как Windows делает повышенные разрешения. В Windows нет sudo.

Запуск приложений

Вы можете запустить любое приложение Windows из терминала Ubuntu. Например, я могу открыть проводник Windows из терминала Unbuntu.

Проводник Windows и терминал Ubuntu
(Большой превью)

Это также работает в обратном порядке. Вы можете запустить любое приложение, установленное на стороне Linux. Здесь я запускаю «фортуну», установленную в Linux, из командной строки Windows. (Потому что это не правильная установка Linux без случайных, бессмысленных состояний.)

Командная строка Windows, выполняющая программу «fortune» для Linux
(Большой превью)

Две разные операционные системы. Две разные файловые системы. Два разных набора установленных приложений. Видите, как это может запутать?

Чтобы все было правильно, я рекомендую вам хранить все ваши файлы и инструменты разработки JavaScript, установленные на стороне Linux. Тем не менее, возможность перемещаться между Windows и Linux и получать доступ к файлам из обеих систем — основная магия WSL. Не забывайте об этом, потому что это то, что делает всю эту установку лучше, чем просто стандартную коробку Linux.

Настройка среды разработки

С этого момента я собираюсь дать вам список самоуверенных вещей для того, что, как я думаю, делает Linux-убийцу для установки Windows. Просто помните: мое мнение таково. Мнения . Просто так получилось, что, как и все мои мнения, они на 100% верны.

Получение лучшего терминала

Да, у вас появился терминал, когда вы установили Ubuntu. На самом деле это консоль Windows, подключенная к вашему дистрибутиву Linux. Не плохая консоль. Вы можете изменить его размер, включить копирование/вставку (в настройках). Но вы не можете делать такие вещи, как вкладки или открывать новые окна. Точно так же, как многие люди используют терминальные программы на Mac (я использую Hyper), есть и другие варианты для Windows. Список Awesome WSL на Github содержит довольно исчерпывающий список.

Все это хорошие эмуляторы, но есть новый вариант, созданный людьми, хорошо знающими Windows.

Microsoft работает над новым приложением под названием «Windows Terminal».

Элемент Windows Terminal в Магазине Windows
(Большой превью)

Терминал Windows можно установить из Магазина Windows, и в настоящее время он находится в режиме предварительного просмотра. Я использую его уже довольно давно, и он имеет достаточно функций и достаточно стабилен, чтобы я мог полностью его одобрить.

Новый терминал Windows имеет полный интерфейс вкладок, копирование/вставку, несколько профилей, прозрачный фон, фоновые изображения и даже прозрачные фоновые изображения. Это полевой день, если вы хотите настроить свой терминал, и я пришел, чтобы выиграть эту гонку с мешками.

Вот мой текущий терминал. Мы пройдемся по некоторым важным настройкам здесь.

Текущий терминал автора: Темно-синий фон с мультяшной планетой в правом нижнем углу. Зелено-белый текст.
(Большой превью)

Терминал Windows вполне настраиваемый. Щелкнув стрелку « » в левом верхнем углу (рядом со знаком « + »), вы получите доступ к «Настройки». Это откроет файл JSON.

Привязать Копировать/Вставить

В верхней части файла находятся все привязки клавиш. Первое, что я сделал, это «скопировал» карту на Ctrl+C и вставил на Ctrl+V . Как еще я собираюсь копировать и вставлять команды из Stack Overflow, которые я не понимаю?

 { "command": "copy", "keys": ["ctrl+c"] }, { "command": "paste", "keys": ["ctrl+v"] },

Проблема в том, что Ctrl + C уже сопоставлен с SIGINT или командой Interrupt/kill в Linux. Существует множество терминалов для Windows, которые обрабатывают это, сопоставляя Copy/Paste с Ctrl + Shift + C и Ctrl + Shift + V соответственно. Проблема в том, что копирование/вставка — это Ctrl + C / Ctrl + V в любое другое место в Windows. Я просто продолжал нажимать Ctrl + C в терминале снова и снова, пытаясь скопировать что-то. Я не мог перестать это делать.

Терминал Windows обрабатывает это по-другому. Если у вас выделен текст и вы нажмете Ctrl + C , он скопирует текст. Если есть запущенный процесс, он все равно отправляет команду SIGINT вниз и прерывает ее. Это означает, что вы можете безопасно сопоставить Ctrl + C / Ctrl + V для копирования / вставки в терминале Windows, и это не помешает вам прерывать процессы.

Кто бы мог подумать, что копирование/вставка может вызвать столько душевных страданий?

Изменить профиль по умолчанию

Профиль по умолчанию — это то, что появляется при открытии новой вкладки. По умолчанию это Powershell. Вам нужно прокрутить вниз и найти профиль Linux. Это тот, который открывает wsl.exe -d Ubuntu . Скопируйте его GUID и вставьте в параметр defaultProfile .

Я переместил эти две настройки так, чтобы они были рядом друг с другом, чтобы их было легче увидеть:

Профиль терминала по умолчанию, выделенный в файле settings.json
(Большой превью)

Установить фон

Мне нравится, чтобы мой фон был темного сплошного цвета с плоским логотипом в правом углу. Я делаю это, потому что хочу, чтобы логотип был ярким и заметным, но не мешал тексту. Это я сделал сам, но на Simple Desktops есть отличная коллекция плоских изображений.

Фон задается свойством backgroundImage :

 "backgroundImage": "c:/Users/YourUserName/Pictures/earth.png" 
Синее квадратное изображение с мультяшной планетой в правом нижнем углу.
(Большой превью)

Вы также заметите настройку под названием «акрил». Это то, что позволяет вам регулировать непрозрачность фона. Если у вас сплошной цвет фона, это довольно просто.

 "background": "#336699", "useAcrylic": true, "acrylicOpacity": 0.5 
Терминал со слегка прозрачным фоном
(Большой превью)

Вы можете сделать это и с фоновым изображением, комбинируя настройку arcylicOpacity с backgroundImageOpacity :

 "backgroundImage": "c:/Users/username/Pictures/earth-and-stars.png", "useAcrylic": true, "acrylicOpacity": 0.5 
Терминал с прозрачным изображением и прозрачным фоном
(Большой превью)

В моей теме прозрачность заставляет все выглядеть приглушенным, поэтому я устанавливаю для useAcrylic значение false .

Изменить шрифт

Команда разработчиков Windows Terminal также работает над новым шрифтом под названием «Cascadia Code». На момент написания этой статьи он недоступен, поэтому вместо него вы получаете шрифт Windows по умолчанию.

Шрифт по умолчанию в терминале Windows — «Consolas». Это тот же шрифт, который используется в командной строке Windows. Если вы хотите получить истинное ощущение Ubuntu, Крис Хоффман указывает, как установить официальный шрифт Ubuntu Mono.

Вот фото до и после, чтобы вы могли увидеть разницу:

 "fontFace": "Ubuntu Mono" 
Параллельное сравнение шрифтов Consolas и Unbuntu Mono в терминале
(Большой превью)

Они очень похожи; основное отличие заключается в расстоянии Ubuntu Mono, которое делает терминал немного более тесным и чистым.

Цветовые схемы

Все цветовые схемы находятся в нижней части файла настроек. Я скопировал цветовую схему «Campbell» в качестве основы. Я стараюсь сопоставлять цвета с их именами, но я не боюсь и мошенничать. Я сопоставлю «#ffffff» с «синим» — мне все равно.

Настройки цветовой схемы из файла settings.json
(Большой превью)

Если вам нравится эта конкретная схема, которую я назвал «Земля», я собрал эту суть, чтобы вам не пришлось вручную копировать весь этот беспорядок со скриншота.

Примечание . Предварительный просмотр цветов осуществляется благодаря расширению Color Highlight для VS Code.

Изменить начальный каталог по умолчанию

По умолчанию профиль WSL помещает вас в ваш домашний каталог на стороне Windows. Основываясь на настройке, которую я рекомендую в этой статье, было бы предпочтительнее вместо этого поместить ее в home папку Linux. Для этого измените настройку startingDirectory в вашем профиле «Ubuntu»:

 "startingDirectory": "\\\\wsl$\\Ubuntu\\home\\burkeholland"

Обратите внимание на путь туда. Вы можете использовать этот путь (за вычетом дополнительных косых черт) для доступа к WSL из командной строки Windows.

Команда «dir» запускается для домашнего каталога Linux из командной строки Windows.
(Большой превью)

Установить Zsh/Oh-My-Zsh

Если вы никогда раньше не использовали Zsh и Oh-My-Zsh, вас ждет настоящее удовольствие. Zsh (или «Z Shell») — это заменяющая оболочка для Linux. Он расширяет базовые возможности Bash, включая подразумеваемое переключение каталогов (не нужно набирать cd ), улучшенную поддержку тем, улучшенные подсказки и многое другое.

Чтобы установить Zsh, возьмите его с помощью диспетчера пакетов apt, который входит в комплект поставки Linux:

 sudo apt install zsh

Установите oh-my-zsh с помощью curl. Oh-my-zsh — это набор конфигураций для zsh, которые еще больше улучшают работу оболочки с помощью плагинов, тем и множества сочетаний клавиш.

 sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Затем он спросит вас, хотите ли вы изменить оболочку по умолчанию на Zsh. Да, поэтому ответьте утвердительно, и теперь вы работаете с Zsh и Oh-My-Zsh.

Терминал спрашивает, хотите ли вы изменить оболочку по умолчанию
(Большой превью)

Вы заметите, что подсказка стала намного чище. Вы можете изменить внешний вид этого приглашения, изменив тему в файле ~/.zshrc .

Откройте его с помощью nano , похожего на VIM, но вы можете что-то редактировать и выходить, когда вам нужно.

 nano ~/.zshrc

Измените строку, задающую тему. Над ним есть URL с полным списком тем. Я думаю, что "облако" хорошо. И милый.

«Облачная» тема задается в файле zshrc
(Большой превью)

Чтобы получить изменения в полученном .zshrc , вам потребуется его источник:

 source ~/.zshrc 
Подсказка «облачная» тема
(Большой превью)

Примечание . Если вы выберете такую ​​тему, как «агностер», для которой требуются глифы, вам понадобится версия Ubuntu Mono с питанием от сети, в которой есть… глифы. В противном случае ваш терминал будет просто заполнен странными символами, как если бы вы помяли лицо о клавиатуру. Nerd Fonts предлагает тот, который работает очень хорошо.

Теперь вы можете делать такие вещи, как изменение каталога, просто введя имя каталога. cd не требуется. Хотите вернуться к каталогу? Просто сделай .. Вам даже не нужно вводить полное имя каталога, просто введите первые несколько букв и нажмите Tab. Zsh предоставит вам список всех файлов/каталогов, соответствующих вашему запросу, и вы сможете просмотреть их.

Терминал с выделенным одним из многих путей
(Большой превью)

Установка узла

Как веб-разработчик, вы, вероятно, захотите установить Node. Я полагаю, вам не нужно устанавливать Node, чтобы заниматься веб-разработкой, но в 2019 году это точно так!

Вашим первым побуждением может быть установка узла с помощью apt , что вы можете сделать, но вы пожалеете об этом по двум причинам:

  1. Версия Node на apt безнадежно устарела;
  2. Вы должны установить Node с менеджером версий, чтобы не столкнуться с проблемами прав доступа.

Лучший способ решить обе эти проблемы — установить nvm (Node Version Manager). Поскольку вы установили zsh , вы можете просто добавить плагин nvm в свой файл zshrc, а zsh позаботится обо всем остальном.

Сначала установите плагин, клонировав его в zsh-nvm . (Не волнуйтесь, Git входит в стандартную комплектацию вашей установки Ubuntu.)

 git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Затем добавьте его как плагин в файл ~/.zshrc .

 `nano ~/.zshrc` plugins (zsh-nvm git) 
Файл zshrc с добавленным zsh-vnm-plugin
(Большой превью)

Не забудьте снова создать файл zshrc с помощью source ~/.zshrc , и вы увидите, что nvm устанавливается.

Терминал, показывающий ход установки nvm
(Большой превью)

Теперь вы можете установить узел с nvm. Это позволяет легко установить несколько параллельных версий узла и легко переключаться между ними. Кроме того, никаких ошибок прав доступа при глобальной установке npm!

 nvm install --lts

Я рекомендую это вместо стандартной установки nvm, потому что плагин дает вам возможность легко обновить nvm. Это своего рода боль со стандартной установкой «curl». Это одна команда с плагином.

 nvm upgrade

Используйте автоматические предложения

Один из моих самых любимых плагинов для zsh — это zsh-autosuggestions. Он запоминает то, что вы набирали в терминале ранее, а затем распознает их, когда вы начинаете вводить их снова, а также «автоматически предлагает» строку, которая может вам понадобиться. Этот плагин пригождался больше раз, чем я могу вспомнить, особенно когда дело доходит до длинных команд CLI, которые я использовал в прошлом, но не могу вспомнить.

Клонируйте репозиторий в папку расширений zsh:

 git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

Затем добавьте его в свои плагины zsh и создайте файл zshrc:

 nano ~/.zshrc # In the .zshrc file plugins(zsh-nvm zsh-autosuggestions git) source ~/.zshrc

Плагин читает вашу историю zsh, поэтому начните вводить какую-нибудь команду, которую вы вводили ранее, и наблюдайте за волшебством. Попробуйте ввести первую часть этой длинной команды клонирования выше.

Терминал, показывающий автопредложения zsh, автоматически завершающие команду git clone
(Большой превью)

Если вы нажмете , команда будет автоматически завершена. Если вы продолжите нажимать ↹ , он будет циклически перебирать любые команды в вашей истории, которые могут совпадать.

Важные сочетания клавиш

Есть несколько ярлыков терминала, которые я использую все время. Я обнаруживаю это во всех своих инструментах, включая VS Code. Попытка выучить все ярлыки — пустая трата времени, потому что вы не будете использовать их достаточно, чтобы запомнить их.

Вот некоторые из них, которыми я регулярно пользуюсь:

Ярлык терминала Что оно делает?
Ctrl + Л Это очистит терминал и вернет вас наверх. Это эквивалент ввода «clear».
Ctrl + У Это очищает только текущую строку.
Ctrl + А Отправляет курсор в начало командной строки.
Ctrl + Е Переход к концу строки.
Ctrl + К Удалить все символы после курсора.

Вот и все! Все остальное я, вероятно, выучил, а потом забыл, потому что это никогда не пригодится.

Настройка Git(Hub/Lab/Whatevs)

Git поставляется в Ubuntu, поэтому установка не требуется. Вы можете следовать инструкциям вашего хостера управления исходным кодом, чтобы создать и работать ваши ssh-ключи.

Обратите внимание, что в инструкциях Github вам предлагается использовать утилиту «copy» для копирования вашего ssh-ключа. В Ubuntu есть команда «xcopy», но здесь она не сработает, потому что нет взаимодействия между Linux и Windows с точки зрения буфера обмена.

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

 cat ~/.ssh/id_rsa.pub | clip.exe

Документы Github советуют вам убедиться, что ssh-agent запущен. Это не. Вы увидите это, когда попытаетесь добавить свой ключ в агент:

Терминал, показывающий, что агент ssh не запущен
(Большой превью)

Вы можете запустить агент, но при следующей перезагрузке Windows или при остановке WSL вам придется запускать его снова. Это связано с тем, что в WSL нет системы инициализации. Не существует systemd или другого процесса, который запускает все ваши службы при запуске WSL. WSL все еще находится в предварительной версии, и команда работает над решением для этого.

Между тем, хотите верьте, хотите нет, для этого тоже есть плагин zsh. Он называется ssh-agent и устанавливается вместе с oh-my-zsh, поэтому все, что вам нужно сделать, это указать его в файле .zshrc .

 zsh-nvm zsh-autosuggestions ssh-agent git

Это запустит ssh-agent автоматически, если он не запущен при первом запуске WSL. Недостатком является то, что он будет запрашивать вашу парольную фразу каждый раз, когда WSL запускается заново. Это означает практически каждый раз, когда вы перезагружаете компьютер.

Терминал запрашивает парольную фразу для ключа rsa
(Большой превью)

Код VS и WSL

WSL не имеет графического интерфейса, поэтому вы не можете установить визуальный инструмент, такой как VS Code. Это должно быть установлено на стороне Windows. Это представляет собой проблему, потому что у вас есть программа, работающая на стороне Windows, которая обращается к файлам на стороне Linux, и это может привести ко всем причудам и проблемам «отказа в доступе». Как правило, Microsoft рекомендует не изменять файлы на стороне WSL с помощью программ Windows.

Чтобы решить эту проблему, существует расширение для VS Code под названием «Remote WSL». Это расширение создано Microsoft и позволяет разрабатывать в рамках WSL, но изнутри VS Code.

После установки расширения вы можете подключить VS Code непосредственно к стороне Ubuntu, открыв палитру команд ( Ctrl + Shift + P) и выберите «Remote-WSL: новое окно».

VS Code с командой «Remote WSL: New Window», выделенной в палитре команд
(Большой превью)

Это открывает новый экземпляр VS Code, который позволяет вам работать так, как если бы вы были полностью на стороне Linux. Выполнение «Файл/Открыть» просматривает файловую систему Ubuntu, а не Windows.

Представление VS Code «Открыть файл»
(Большой превью)

Встроенный терминал в VS Code открывает вашу прекрасно настроенную настройку zsh. Все «просто работает», как и должно быть, когда у вас установлено расширение Remote WSL.

Если вы открываете код со своего терминала с помощью code . , VS Code автоматически обнаружит, что он был открыт из WSL, и автоматически прикрепит расширение Remote WSL.

Расширения кода VS с удаленным WSL

Расширение Remote WSL для VS Code работает, настраивая небольшой сервер на стороне Linux, а затем подключаясь к нему из VS Code на стороне Windows. В этом случае расширения, которые вы установили в VS Code, не будут автоматически отображаться при открытии проекта из WSL.

Например, у меня есть проект Vue, открытый в VS Code. Несмотря на то, что у меня установлены все нужные расширения Vue для подсветки синтаксиса, форматирования и тому подобного, VS Code ведет себя так, как будто никогда раньше не видел файл .vue .

Файл .vue, открытый в VS Code без подсветки синтаксиса
(Большой превью)

Все установленные вами расширения можно включить в WSL. Просто найдите нужное расширение в WSL и нажмите кнопку «Установить в WSL».

Целевая страница расширения Vetur VS Code в VS Code
(Большой превью)

Все расширения, установленные в WSL, будут отображаться в отдельном разделе в представлении Extensions Explorer. Если у вас много расширений, установка каждого из них по отдельности может немного раздражать. Если вы хотите просто установить каждое расширение, которое у вас есть в WSL, щелкните маленький значок облачной загрузки в верхней части раздела «Локально — установлено».

Представление «Расширения» в VS Code с выделенным значком «Установить все расширения в WSL»
(Большой превью)

Как настроить каталоги разработчиков

Это уже самоуверенная статья, так что вот статья, о которой вы не просили, о том, как, по моему мнению, вы должны структурировать свои проекты в своей файловой системе.

Я держу все свои проекты на стороне Linux. Я не помещаю свои проекты в «Мои документы», а затем пытаюсь работать с ними из WSL. Мой мозг не может этого вынести.

Я создаю папку с именем /dev , которую помещаю в корень моей папки /home в Linux. Внутри этой папки я создаю еще одну с тем же именем, что и мой репозиторий на Github: /burkeholland . В эту папку попадают все мои проекты — даже те, которые не отправлены на Github.

Если я клонирую репозиторий из другой учетной записи Github (например, «Microsoft»), я создам новую папку в «dev» с именем /microsoft . Затем я клонирую репо в папку внутри этого.

По сути, я имитирую ту же структуру, что и система управления версиями на моей локальной машине. Мне гораздо проще рассуждать о том, где находятся проекты и к каким репозиториям они привязаны, просто в силу своего местоположения. Это просто, но очень эффективно помогает мне держать все в порядке. И мне нужна вся помощь, которую я могу получить.

Структура папок, предложенная авторами, указана в терминале.
(Большой превью)

Просмотр файлов из проводника Windows

Бывают случаи, когда вам нужно получить доступ к файлу в Linux со стороны Windows. Прелесть WSL в том, что вы все еще можете это делать.

Один из способов — получить доступ к WSL точно так же, как к подключенному диску. Получите к нему доступ с помощью \\wsl$ прямо из панели проводника:

 \\wsl$ 
Проводник Windows установка Ubuntu как смонтированный каталог
(Большой превью)

Вы можете сделать это по разным причинам. Например, только сегодня мне понадобилось расширение для Chrome, которого нет в интернет-магазине. Поэтому я клонировал репозиторий в WSL, затем перешел к нему как к «распакованному расширению» и загрузил его в Edge.

Одна вещь, которую я довольно часто делаю в Linux, — это открытие каталога, содержащего файл, прямо из терминала. Вы можете сделать это и в WSL, напрямую вызвав explorer.exe . Например, эта команда открывает текущий каталог в проводнике Windows.

 $ explorer.exe . 
GIF-файл, демонстрирующий открытие проводника Windows в текущем каталоге из терминала.

Однако эта команда немного громоздка. В Linux он просто open . . Мы можем сделать то же самое, создав псевдоним в ~/.zshrc .

 alias open="explorer.exe"

Докер

Когда я сказал, что все инструменты должны быть на стороне Linux, я имел в виду именно это. В том числе Докер.

Вот где резина действительно начинает встречаться с дорогой. Здесь нам нужен Docker, работающий внутри Linux, работающий внутри Windows. Это немного похоже на русскую матрешку, когда вы записываете это в блоге. На самом деле, это довольно просто.

Вам понадобится правильная версия Docker для Windows. На момент написания этой статьи это технический предварительный просмотр WSL 2.

Когда вы запустите программу установки, она спросит вас, хотите ли вы использовать контейнеры Windows вместо контейнеров Linux. Вы определенно делаете. В противном случае вы не сможете запустить Docker в WSL.

Экран установки Docker с выбранным параметром «Использовать контейнеры Windows».
(Большой превью)

Теперь вы можете включить Docker в WSL, щелкнув элемент на панели задач и выбрав «WSL 2 Tech Preview»:

Опция WSL2 Tech Preview в контекстном меню Docker Daemon
(Большой превью)

После запуска службы вы можете использовать Docker в WSL, как и ожидалось. Запуск Docker в WSL обеспечивает довольно большой прирост производительности, а также увеличение времени холодного запуска контейнеров.

Могу ли я также порекомендовать вам установить расширение Docker для VS Code? Он добавляет визуальный интерфейс к вашей настройке Docker и, как правило, просто упрощает работу с Docker, потому что вам не нужно запоминать все эти флаги и параметры командной строки.

Получите больше Bash в Windows

К этому моменту вы должны получить представление о том, как установить Bash в Windows и как он будет работать после того, как вы это сделаете. Вы можете бесконечно настраивать свой терминал, и есть всевозможные крутые программы, которые вы можете добавить, чтобы делать такие вещи, как автоматическая установка переменных PATH, создание псевдонимов, получение коровы ASCII в вашем терминале и многое другое.

Запуск Bash в Windows открыл для меня совершенно новую вселенную. Я могу совмещать Windows, которую я люблю с точки зрения производительности, и Linux, от которого я зависим как разработчик. Лучше всего то, что теперь я могу создавать приложения для обеих платформ на одной машине.

Дальнейшее чтение

Вы можете прочитать больше о Bash в Windows здесь:

  • «Подсистема Windows для руководства по установке Linux для Windows 10», Microsoft Docs
  • «Как установить и использовать оболочку Bash в Windows 10», Крис Хоффман, How-To Geek
  • «Совместное использование SSH с WSL», Дрю Уилсон
  • «Без ума от подсистемы Window для Linux», Брайан Кетельсен
  • «Все, что вы можете сделать с новой оболочкой Bash в Windows 10», Крис Хоффман, How-To Geek

Особая благодарность Брайану Кетельсену, Мэтту Эрнандесу, Ричу Тернеру и Крейгу Лоуэну за их терпение, помощь и рекомендации в отношении этой статьи.