Полное руководство по настройке веб-разработчика Windows


Содержание
  1. 🔭 Обзор
  2. Необходимые условия
  3. 🐧 WSL
  4. Установка WSL 2
  5. Конфигурация пользователя
  6. Обновление Linux
  7. Сопоставление диска Linux
  8. Закрепите каталог кода
  9. Перезапуск WSL
  10. Терминал Windows 👨💻
  11. Установка терминала Windows
  12. Настройки терминала
  13. Профиль по умолчанию
  14. Начальный каталог
  15. 📝 Конфигурация Git
  16. Имя
  17. Email
  18. Имя пользователя
  19. Учетные данные GitHub 😺
  20. Создание персонального маркера доступа
  21. Менеджер учетных данных Git
  22. Хранение вашего токена
  23. 💤 Zsh
  24. Установка Zsh
  25. OhMyZsh
  26. cURL
  27. Установка OhMyZsh
  28. Дополнительные плагины
  29. zsh-autosuggestions
  30. zsh-syntax-highlighting
  31. Больше
  32. 📦 Node.js
  33. NVM
  34. Установка NVM
  35. Изменение версий Node
  36. NPM
  37. Новые проекты
  38. package.json
  39. Установка модулей
  40. Зависимости
  41. Зависимости разработчика
  42. Пакетная установка
  43. Деинсталляция
  44. Версионирование
  45. package-lock.json
  46. Скрипты
  47. 💻 Visual Studio Code
  48. Установка VS Code
  49. Изменение оболочки по умолчанию
  50. Удаленное расширение
  51. Больше расширений
  52. 🍫 Chocolatey
  53. Оболочка администратора
  54. Вариант 1
  55. Вариант 2
  56. Вариант 3
  57. Вариант 4
  58. Установка шоколада
  59. Основные команды Chocolatey
  60. Приложения для Windows
  61. 🪜 Расширения Chrome
  62. 📚 Ссылки

🔭 Обзор

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

Репо для этого руководства содержит некоторую дополнительную информацию и будет постоянно обновляться.

Необходимые условия

  • Windows 10 версии 2004 и выше (Build 19041 и выше) или Windows 11 (какая у меня версия?)
  • Учетная запись на GitHub

🐧 WSL

Первой и самой важной частью настройки среды разработки Windows является установка подсистемы Windows Subsystem for Linux (WSL). Я рекомендую придерживаться Ubuntu, но не стесняйтесь пробовать столько дистрибутивов, сколько вам нравится. Нет никаких проблем с одновременной установкой нескольких дистрибутивов.

Установка WSL 2

WSL 2 – это последняя версия WSL, в которой добавлены новые возможности, такие как полное ядро Linux и полная совместимость системных вызовов. Раньше для ее установки требовалось несколько шагов, но теперь достаточно ввести следующую команду в PowerShell или Command Prompt:

wsl --install
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда делает следующее:

  • Включает дополнительные компоненты WSL и Virtual Machine Platform
  • Загружает и устанавливает последнюю версию ядра Linux
  • Устанавливает WSL 2 по умолчанию
  • Загружает и устанавливает дистрибутив Ubuntu Linux (может потребоваться перезагрузка).

Использование команды --install по умолчанию устанавливает Ubuntu и работает только в том случае, если WSL еще не установлена. Если вы хотите изменить дистрибутив Linux по умолчанию, следуйте этим документам.

Конфигурация пользователя

После завершения процесса установки дистрибутива Linux с WSL, откройте дистрибутив (по умолчанию Ubuntu) с помощью меню Пуск. Вам будет предложено создать имя пользователя и пароль для вашего дистрибутива Linux. Когда вы введете новый пароль, в терминале ничего не появится. Ваша клавиатура по-прежнему работает! Это просто функция безопасности.

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

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

  • Эта учетная запись будет считаться администратором Linux с возможностью выполнения административных команд sudo (Super User Do).

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

Обновление Linux

Рекомендуется регулярно обновлять и модернизировать пакеты. В Ubuntu или Debian мы используем менеджер пакетов apt:

sudo apt update && sudo apt upgrade
Вход в полноэкранный режим Выход из полноэкранного режима

Windows не обновляет и не обновляет автоматически ваш дистрибутив(ы) Linux. Это задача, которую большинство пользователей Linux предпочитают контролировать самостоятельно.

Сопоставление диска Linux

Когда вы открываете проводник файлов Windows, он отображает ваши устройства и диски. Мы собираемся добавить наш виртуальный диск Ubuntu в качестве сетевого расположения для легкого доступа.

  1. Откройте местоположение wsl$ в проводнике файлов:

  2. Щелкните правой кнопкой мыши на папке Ubuntu и выберите Map network drive:

  3. Выберите букву диска, который вы хотите использовать, оставьте галочки Reconnect at sign-in и Connect using different credentials без галочек, а затем нажмите кнопку finish (мой вариант будет выглядеть немного иначе, потому что он уже был сделан):

  4. Конечный результат должен выглядеть примерно так:

Если вы хотите получить доступ к файлам Windows из терминала Linux, они находятся в каталоге /mnt/, поэтому ваш каталог пользователя Windows будет находиться по адресу /mnt/c/Users/username.

Когда диск Ubuntu сопоставлен, вы можете легко перетаскивать или копировать/вставлять файлы Windows в файловую систему Linux с помощью проводника файлов.

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

Закрепите каталог кода

Еще один быстрый совет – создать каталог кода в Ubuntu, а затем закрепить его в меню быстрого доступа, расположенном в левой части проводника файлов. Это удобно при быстрой передаче файлов между Windows и Linux.

  1. Откройте проводник файлов и нажмите на сетевой диск Ubuntu, который мы создали.
  2. Выберите домашний каталог, а затем каталог пользователя.
  3. Щелкните правой кнопкой мыши и создайте новую папку, назовите ее code или как угодно.
  4. Перетащите эту новую папку влево, под значок звезды с надписью Quick access.

Перезапуск WSL

Если по какой-то причине WSL перестала работать, вы можете перезапустить ее с помощью этих двух команд из PowerShell/Command Prompt:

wsl.exe --shutdown
wsl.exe
Вход в полноэкранный режим Выйдите из полноэкранного режима

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


Терминал Windows 👨💻

Для запуска терминала Linux в настоящее время нам нужно использовать значок Ubuntu из меню Пуск или ввести команды wsl или bash в PowerShell/Command Prompt. Другой вариант, который даст нам больше возможностей, таких как вкладки, разделенные представления, темы, прозрачность и привязки клавиш, – это использование терминала Windows. Существует также несколько других терминалов, таких как Cmder, ConEmu или Hyper, но, по моему опыту, Windows Terminal работает очень хорошо.

Установка терминала Windows

Windows 11 поставляется с Windows Terminal по умолчанию, но если вы используете Windows 10, скачайте и установите Windows Terminal через Microsoft Store.

Настройки терминала

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

Профиль по умолчанию

Терминал Windows по умолчанию открывает оболочку PowerShell или Command Prompt при запуске, вот как переключить ее на WSL:

  1. Выберите иконку ˅ в Windows Terminal и перейдите в меню Settings:

  2. В разделе Startup вы найдете выпадающий список Default profile, выберите Ubuntu. Ниже выберите Windows Terminal в качестве терминального приложения по умолчанию:

Начальный каталог

Терминал Ubuntu по умолчанию откроется в корневом каталоге. Для ускорения поиска файлов можно открыть его в домашней директории.

  1. В разделе Профили в меню настроек нажмите на Ubuntu.

  2. На вкладке Общие вы найдете пункт Начальный каталог.

  3. Введите следующее, заменив “username” на ваше имя пользователя Ubuntu: wsl$Ubuntuhomeusername.

  4. Вы можете оставить флажок Use parent process directory не отмеченным.

  5. Если процесс по-прежнему открывается в директории /, измените параметр Командная строка, расположенный прямо над полем ввода Начальная директория на следующий: wsl.exe -d Ubuntu.

Существует множество других настроек, которые можно изучить, а также JSON-файл, который можно редактировать для более сложных настроек.

Посмотрите в этом руководстве некоторые популярные темы терминала Windows и способы их установки.


📝 Конфигурация Git

Git должен быть предустановлен на большинстве, если не на всех дистрибутивах WSL Linux. Чтобы убедиться, что у вас последняя версия, используйте следующую команду в дистрибутиве на базе Ubuntu или Debian:

sudo apt install git
Войти в полноэкранный режим Выйти из полноэкранного режима

Имя

Чтобы настроить свой файл конфигурации Git, откройте командную строку WSL и задайте свое имя с помощью этой команды (заменив “Your Name” на предпочитаемое имя пользователя):

git config --global user.name "Your Name"
Войти в полноэкранный режим Выйти из полноэкранного режима

Email

Задайте свой email с помощью этой команды (заменив “youremail@domain.com” на предпочитаемый email):

git config --global user.email "youremail@domain.com"
Войти в полноэкранный режим Выйти из полноэкранного режима

Имя пользователя

И наконец, добавьте свое имя пользователя GitHub, чтобы связать его с git (с учетом регистра!):

git config --global user.username "GitHub username"
Войти в полноэкранный режим Выйти из полноэкранного режима

Убедитесь, что вы вводите user.username, а не user.name, иначе вы перезапишете свое имя, и вы не будете правильно синхронизированы с аккаунтом GitHub.

Вы можете перепроверить любые настройки, набрав git config --global user.name и так далее. Для внесения изменений просто введите нужную команду еще раз, как в примерах выше.


Учетные данные GitHub 😺

Создание персонального маркера доступа

GitHub убрал возможность использовать обычный пароль при работе в удаленном репозитории. Теперь вместо этого требуется создать персональный токен доступа.

Персональные маркеры доступа (PAT) являются альтернативой паролям для аутентификации в GitHub при использовании API GitHub или командной строки.

Следуйте этим документам для получения пошаговых инструкций по созданию персонального маркера.

Менеджер учетных данных Git

После того как вы введете свой токен в первый раз, его можно сохранить с помощью Git Credential Manager (GCM), чтобы вам не приходилось каждый раз проходить аутентификацию.

Вы можете установить Git одновременно в WSL и в Windows. Git для Windows включает GCM и является предпочтительным способом установки.

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

Хранение вашего токена

После установки Git Credential Manager вы можете настроить его для использования в WSL. Откройте терминал WSL и введите эту команду:

git config --global credential.helper "/mnt/c/Program Files/Git/mingw64/bin/git-credential-manager-core.exe"
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание:

Если вы получите следующее сообщение об ошибке:

/mnt/c/Program Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe store: 1: 
/mnt/c/Program Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe: not found
Enter fullscreen mode Выход из полноэкранного режима

Попробуйте использовать эту команду:

git config --global credential.helper store
Войти в полноэкранный режим Выйти из полноэкранного режима

💤 Zsh

Оболочка Z работает почти так же, как и стандартная оболочка BASH, установленная в Linux по умолчанию. Отличием является поддержка плагинов и тем, а также некоторые дополнительные возможности, такие как исправление орфографии и рекурсивное расширение путей. Пришло время выбросить BASH в мусорное ведро!

Установка Zsh

Zsh можно установить с помощью одной команды:

sudo apt install zsh
Войти в полноэкранный режим Выйти из полноэкранного режима

После установки введите команду zsh. Zsh попросит вас выбрать некоторые конфигурации. Мы сделаем это позже при установке oh-my-zsh, поэтому выберите опцию 0, чтобы создать файл конфигурации и предотвратить повторное появление этого сообщения.

OhMyZsh

Самым популярным фреймворком плагинов на сегодняшний день является OhMyZsh. Он поставляется с большим количеством плагинов, тем, помощников и многого другого. Он, конечно, может помочь в производительности, но, что более важно, он просто выглядит круто 😎.

cURL

Прежде всего, нам нужно убедиться, что у нас установлен cURL. Сокращение от “Client URL”, это способ передачи данных из командной строки, и именно так мы будем загружать OhMyZsh.

Установите curl с помощью:

sudo apt install curl
Войти в полноэкранный режим Выйти из полноэкранного режима

Установка OhMyZsh

Введите следующую команду в терминал, чтобы установить OhMyZsh:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все! Теперь вы должны увидеть каталог .oh-my-zsh внутри вашей домашней директории. Чтобы изменить плагины и темы, вам нужно отредактировать файл .zshrc, который также находится в вашем домашнем каталоге.

Здесь приведен список всех тем и плагинов, которые поставляются в комплекте с OhMyZsh.

Дополнительные плагины

Существует бесчисленное множество плагинов, но эти два я рекомендую больше всего.

zsh-autosuggestions

Автосоветы для zsh, он предлагает команды по мере ввода на основе истории и завершенных команд.

  • 1. Клонируйте этот репозиторий в $ZSH_CUSTOM/plugins (по умолчанию ~/.oh-my-zsh/custom/plugins).
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Войдите в полноэкранный режим Выход из полноэкранного режима
  • 2. Добавьте плагин в список плагинов для загрузки Oh My Zsh (внутри ~/.zshrc):
plugins=(git zsh-autosuggestions)
Войти в полноэкранный режим Выйти из полноэкранного режима
  • 3. Начните новый терминальный сеанс.

zsh-syntax-highlighting

Этот пакет предоставляет подсветку синтаксиса для оболочки zsh. Он позволяет подсвечивать команды во время их ввода в интерактивном терминале в приглашении zsh. Это помогает просматривать команды перед их выполнением, особенно при обнаружении синтаксических ошибок.

  • 1. Клонируйте этот репозиторий в каталог плагинов oh-my-zsh:
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Войти в полноэкранный режим Выйти из полноэкранного режима
  • 2. Активируйте плагин в ~/.zshrc:
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
Войти в полноэкранный режим Выйти из полноэкранного режима
  • 3. Начните новый сеанс терминала.

Больше

Огромный список плагинов можно найти в потрясающем репо плагинов zsh.


📦 Node.js

Node.js – это среда выполнения JavaScript, которая выполняет код JavaScript вне веб-браузера. Она позволяет нам устанавливать пакеты, запускать локальные веб-серверы, создавать API и многое другое.

NVM

Скорее всего, вам придется переключаться между несколькими версиями Node.js в зависимости от потребностей различных проектов, над которыми вы работаете. Node Version Manager позволяет вам быстро устанавливать и использовать различные версии node через командную строку.

Установка NVM

  • 1. Откройте командную строку Ubuntu и установите NVM:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Войти в полноэкранный режим Выйти из полноэкранного режима

Чтобы проверить установку, введите: command -v nvm. Это должно вернуть ‘nvm’, если вы получите ‘команда не найдена’ или вообще никакого ответа, закройте текущий терминал, снова откройте его и попробуйте снова.

  • 2. Перечислите, какие версии Node установлены в настоящее время (на данный момент их не должно быть):
nvm ls
Войти в полноэкранный режим Выйти из полноэкранного режима

  • 3. Установите текущую и стабильную LTS-версии Node.js.

Установите текущую стабильную LTS-версию Node.js (рекомендуется для производственных приложений):

nvm install --lts
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Установите текущий выпуск Node.js (для тестирования последних функций и улучшений Node.js, но с большей вероятностью возникновения проблем):

nvm install node
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • 4. Перечислите, какие версии Node установлены:
nvm ls
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы должны увидеть в списке две версии, которые вы только что установили.

  • 5. Убедитесь, что Node.js установлен и имеет текущую версию:
node --version
Войти в полноэкранный режим Выйдите из полноэкранного режима

Затем проверьте, что у вас также установлен NPM:

npm --version
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Изменение версий Node

Используйте следующие команды для изменения версии Node, которую вы хотите использовать для того или иного проекта:

Переключиться на текущую версию:

nvm use node
Войти в полноэкранный режим Выйти из полноэкранного режима

Переключиться на версию LTS:

nvm use --lts
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы также можете использовать конкретный номер для любых дополнительных версий, которые вы установили:

nvm use v8.2.1.
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы перечислить все доступные версии Node.js, используйте команду: nvm ls-remote.

NPM

Node Package Manager – это менеджер пакетов по умолчанию для Node.js. Это инструмент командной строки, используемый для загрузки или публикации пакетов и управления зависимостями проекта. Репозиторий всех доступных пакетов NPM находится по адресу https://www.npmjs.com/.

Новые проекты

При создании нового проекта, который будет использовать NPM, его необходимо инициализировать с помощью команды init. Сначала убедитесь, что вы находитесь в корневом каталоге вашего проекта, а затем выполните следующую команду:

npm init
Войти в полноэкранный режим Выйти из полноэкранного режима

package.json

npm init создает файл package.json и запрашивает метаданные вашего проекта. Сюда входят такие данные, как название, версия, описание и лицензия. Вы можете считать его чертежом вашего проекта, поскольку в нем также будут указаны пакеты, от которых он зависит. Метаданные можно изменить в любое время, отредактировав файл package.json после инициализации.

Если вы хотите автоматически заполнить инициализацию всеми значениями по умолчанию, вы можете добавить флаг --yes.

npm init --yes
Вход в полноэкранный режим Выход из полноэкранного режима

Установка модулей

Модули устанавливаются с помощью команды npm install или npm i.

npm install react
Вход в полноэкранный режим Выход из полноэкранного режима

Приведенная выше команда установит модуль React в качестве зависимости в package.json.

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

Yarn – еще один широко используемый менеджер пакетов node, если мы хотим использовать его во всех наших проектах node, нам понадобится флаг --global или -g.

npm install --global yarn
Вход в полноэкранный режим Выход из полноэкранного режима

Зависимости

Вы можете сохранить модуль как зависимость или как зависимость разработчика.

Зависимость – это то, без чего ваш проект не сможет нормально функционировать.

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

npm install --save gray-matter
Вход в полноэкранный режим Выйти из полноэкранного режима

То же самое, что и:

npm install gray-matter
Войти в полноэкранный режим Выйти из полноэкранного режима

Зависимости разработчика

Зависимость от разработчика – это модули, используемые для сборки проекта, а не для его запуска. Сюда входят такие вещи, как линтеры и инструменты тестирования.

Зависимости разработчика добавляются с помощью флага --save-dev или -D. Это добавляет модуль в раздел devDependencies в package.json.

npm install --save-dev husky
Вход в полноэкранный режим Выход из полноэкранного режима

Пакетная установка

Помимо установки одного модуля, вы можете установить все модули, которые перечислены как dependencies и devDependencies:

npm install
Вход в полноэкранный режим Выйти из полноэкранного режима

Это установит все модули, перечисленные в package.json вашего текущего каталога.

Если мы хотим установить только те зависимости, которые необходимы для запуска нашего проекта, используется флаг --production:

npm install --production
Войти в полноэкранный режим Выйти из полноэкранного режима

Флаг --production установит только модули из раздела dependencies в package.json и проигнорирует devDependencies. Преимуществом этого является значительное уменьшение размера папки node_modules.

Деинсталляция

Удаление модулей происходит так же, как и их установка. Для любых глобальных зависимостей или зависимостей от разработчика необходимо использовать флаги.

Зависимости:

npm uninstall react
Вход в полноэкранный режим Выход из полноэкранного режима

Зависимости разработчика:

npm uninstall --save-dev husky
Войти в полноэкранный режим Выйти из полноэкранного режима

Глобальные установки:

npm uninstall --global yarn
Войти в полноэкранный режим Выйти из полноэкранного режима

Версионирование

Версии пакетов обозначаются мажорными, минорными версиями и версиями патчей. 8.1.1 – это мажорная версия 8, минорная версия 1 и патч версии 1.

Вы можете указать точный номер версии с помощью символа @.

npm install react@17.0.1
Вход в полноэкранный режим Выход из полноэкранного режима

Еще два символа, которые мы можем использовать, это ^ и ~.

^ – это последний минорный выпуск.
Например, спецификация npm install ^8.1.1 может установить версию 8.3.1, если это последняя младшая версия.

~ – это последний выпуск патча.
Так же, как и минорные релизы, npm install ~8.1.1 может установить версию 8.1.6, если это последняя доступная версия патча.

При использовании команды npm install или npm i будет использоваться последняя минорная версия.

package-lock.json

Точные версии пакетов будут задокументированы в сгенерированном файле package-lock.json.

Значения, находящиеся внутри объектов dependencies и devDependencies файла package.json, включают диапазон допустимых версий каждого пакета для установки.

package-lock.json генерируется командой npm install и содержит точные версии используемых зависимостей.

Скрипты

package.json также содержит свойство scripts, которое может быть определено для запуска инструментов командной строки, установленных в текущем проекте. Это может включать такие вещи, как запуск тестов, форматирование кода и запуск локального сервера.

Сценарии NPM запускаются с помощью команды run. С приведенной выше конфигурацией вы можете использовать следующую команду для более красивого форматирования кода:

npm run format
Войти в полноэкранный режим Выйти из полноэкранного режима

Ключи в объекте scripts – это имена команд, а значения – фактические команды.


Более подробные руководства можно найти в официальных документах npm и Node.js.


💻 Visual Studio Code

Существует множество замечательных редакторов кода, доступных бесплатно, но Visual Studio Code стал стандартом дефакто и моим личным фаворитом.

Установка VS Code

VS Code доступен для Windows, macOS и Linux. Вы можете скачать последнюю версию программы установки для Windows здесь. Я рекомендую использовать стабильную сборку.

Изменение оболочки по умолчанию

Оболочку WSL2 можно выбрать в качестве терминала VS Code по умолчанию, нажав Ctrl + Shift + P и набрав/выбрав Terminal: Выбрать профиль по умолчанию, а затем выбрать zsh:

Удаленное расширение

Установите расширение Remote – WSL на VS Code.

Это позволит вам использовать WSL в качестве интегрированной среды разработки и обеспечит совместимость и прокладку путей. Узнайте больше.

Это расширение также позволит вам запускать VS Code прямо из терминала WSL с помощью команды code.

Если бы я находился в корневом каталоге моего репозитория, я бы использовал команду code . для запуска всего каталога в VS Code.

cd my-project
code .
Вход в полноэкранный режим Выход из полноэкранного режима

Больше расширений

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

  • Live Server – Запуск локального сервера разработки с функцией живой перезагрузки для статических и динамических страниц.
  • Live Share – Включает все необходимое для совместного редактирования и отладки в режиме реального времени.
  • GitLens – Быстрый просмотр того, кто, почему и когда была изменена строка или блок кода.
  • История Git – просмотр журнала git, истории файлов, сравнение веток или коммитов.
  • Prettier – Prettier – формирователь кода с учетом мнений.
  • ESLint – Поиск и устранение проблем в коде JavaScript.
  • Color Highlight – Это расширение стилизует цвета CSS/web, найденные в вашем документе.
  • Markdown All in One – Клавиатурные сокращения для Markdown, оглавление, автопросмотр и многое другое.
  • markdownlint – Линтование и проверка стилей уцененного кода для Visual Studio Code
  • GitHub Markdown Preview – Добавляет стилизацию, флажки для уценки, сноски, emoji и преамбулу YAML.
  • Wakatime – Метрики, инсайты и отслеживание времени, автоматически генерируемые на основе вашей деятельности по программированию.
  • Dash – интеграция Dash, Zeal и Velocity в Visual Studio Code.
  • Draw.io Integration – Это неофициальное расширение интегрирует Draw.io (также известный как diagrams.net) в VS Code.
  • Docker – упрощает создание, управление и отладку контейнерных приложений.
  • Python – IntelliSense, Linting, отладка, блокноты Jupyter, рефакторинг, модульные тесты и многое другое.

Примечание:

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


🍫 Chocolatey

Chocolatey – это менеджер пакетов, подобный homebrew, но для Windows.

Оболочка администратора

Прежде чем мы начнем процесс установки, я хочу рассказать о запуске административной оболочки из Windows. Есть несколько способов сделать это:

Вариант 1

Щелкните правой кнопкой мыши на стартовом меню Windows и выберите Windows Terminal (Admin):


Когда терминал загрузится, нажмите на значок ˅ и откройте новую вкладку PowerShell. На ней должно быть написано Администратор: Windows PowerShell в новой вкладке:

Вариант 2

Если на панели задач у вас есть Windows Terminal, Shift + Right-Click на значке и выберите запуск от имени администратора, а затем откройте новую вкладку PowerShell:

Вариант 3

Воспользуйтесь строкой поиска в меню Пуск и введите powershell. Появится ссылка на Запуск от имени администратора:

Вариант 4

В Windows Terminal добавлена новая функция, позволяющая автоматически запускать профиль PowerShell/Command Prompt в терминале администратора. В настройках Windows Terminal прокрутите вниз до нужного профиля, а затем установите переключатель Run this profile as Administrator. Теперь вы можете пропустить все шаги, описанные выше, и терминал всегда будет запускаться от имени администратора.

Установка шоколада

  • 1. Откройте административный терминал PowerShell и запустите:
Get-ExecutionPolicy
Войти в полноэкранный режим Выйти из полноэкранного режима
  • 2. Если в результате будет получен ответ Restricted, выполните одну из следующих команд:
Set-ExecutionPolicy AllSigned
Войти в полноэкранный режим Выйти из полноэкранного режима

или

Set-ExecutionPolicy Bypass -Scope Process
Войти в полноэкранный режим Выйти из полноэкранного режима

В PowerShell вы должны убедиться, что Get-ExecutionPolicy не является Restricted. Мы рекомендуем использовать Bypass для обхода политики, чтобы получить установленные вещи, или AllSigned для большей безопасности.

  • 3. Теперь выполните следующую команду:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы не видите никаких ошибок, значит, вы готовы к использованию Chocolatey! Введите choco или choco -? сейчас, или смотрите раздел “Начало работы” для получения инструкций по использованию.

Основные команды Chocolatey

Для запуска chocolatey мы используем команду choco. (Помните, что для ее работы вы должны использовать административную оболочку).

Установите новый пакет:

choco install filename
Войти в полноэкранный режим Выйти из полноэкранного режима

Удалите пакет:

choco uninstall filename
Войдите в полноэкранный режим Выйти из полноэкранного режима

Вывести список всех установленных пакетов:

choco list
Войти в полноэкранный режим Выйти из полноэкранного режима

Обновить:

choco upgrade filename
Войти в полноэкранный режим Выйти из полноэкранного режима

или обновить все сразу:

choco upgrade all
Войти в полноэкранный режим Выйти из полноэкранного режима

Приложения для Windows

Найдите доступные приложения в репозитории пакетов сообщества.

Вот несколько моих любимых (бесплатных) приложений для продуктивности и разработки под Windows:

  • Wox – полнофункциональная пусковая установка
  • RunJs – игровая площадка для JavaScript и TypeScript
  • Responsively – модифицированный веб-браузер, который помогает в разработке отзывчивых веб-сайтов.
  • Zeal – версия Dash для Windows
  • Figma – инструмент для совместного проектирования пользовательского интерфейса
  • draw.io – программа для создания блок-схем и диаграмм
  • GitHub Desktop – графический интерфейс для Git.
  • Postman – инструменты для работы с API
  • Notion – программное обеспечение для управления проектами и ведения заметок
  • Microsoft PowerToys – Набор утилит для опытных пользователей.

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

choco install wox runjs responsively zeal figma drawio github-desktop postman notion powertoys -y
Войти в полноэкранный режим Выход из полноэкранного режима

🪜 Расширения Chrome

Все они также доступны в качестве расширений для Firefox.

  • React Dev tools – добавляет инструменты отладки React в Chrome Developer Tools.
  • ColorZilla – Расширенная пипетка, подборщик цветов, генератор градиентов и другие красочные инструменты.
  • Axe Accessibility – средство проверки доступности для разработчиков, тестировщиков и дизайнеров в Chrome.
  • daily.dev – Получайте рассылку самых горячих новостей для разработчиков персонально для вас.
  • Nimbus Capture – Захват экрана всей веб-страницы или любой ее части.
  • WhatFont – С помощью этого расширения вы можете просматривать веб-шрифты, просто наведя на них курсор.
  • JSON Formatter – Делает JSON легко читаемым.

📚 Ссылки

  • Руководство по установке WSL2
  • Установка и начало работы по настройке терминала Windows
  • Git a Grip
  • Git Credential Manager
  • OhMyZsh Wiki
  • Использование Zsh в терминале Windows
  • Руководство пользователя по Z-Shell
  • Установка Node на WSL
  • Шоколадные документы по установке

Оцените статью
Procodings.ru
Добавить комментарий