В этом руководстве вы узнаете, как воспользоваться преимуществами Visual Studio Code, чтобы ускорить рабочий процесс разработки.
Эта статья написана для новичков в Visual Studio Code и пользователей, которые хотят получить больше от приложения. VS Code, как известно, считается «облегченным» редактором кода. По сравнению с редакторами полной интегрированной среды разработки (IDE), которые занимают гигабайты дискового пространства, VS Code при установке использует менее 200 МБ.
Несмотря на «облегченный» термин, Visual Studio Code предлагает огромное количество функций, которые продолжают расширяться и улучшаться с каждым новым обновлением. В этом руководстве мы рассмотрим наиболее часто используемые функции. У каждого программиста есть свой набор инструментов, который он обновляет всякий раз, когда обнаруживает новые рабочие процессы. Если вы хотите изучить каждый инструмент и функцию, которые может предложить VS Code, ознакомьтесь с их официальной документацией. Кроме того, вы можете отслеживать обновления для новых и улучшенных функций.
Предпосылки
Чтобы следовать этому руководству, вам необходимо владеть хотя бы одним языком программирования и фреймворком. Вы также должны быть знакомы с управлением версиями кода вашего проекта с помощью git. Вам также потребуется учетная запись на платформе удаленного репозитория, такой как GitHub. Я рекомендую вам настроить ключи SSH для подключения к вашему удаленному репозиторию.
Мы будем использовать минимальный проект Next.js для демонстрации возможностей VS Code. Если вы новичок в этом, не беспокойтесь — основное внимание в руководстве уделяется не используемой платформе или языку. Вы можете перенести навыки, которым мы научим, на любой язык и платформу, с которыми вы работаете в Visual Studio Code.
Немного истории
Не так давно предлагались полностью интегрированные среды разработки:
интегрированная среда разработки Visual Studio
NetBeans
Затмение
IntelliJ ИДЕЯ
Эти платформы обеспечивают полный рабочий процесс разработки, от написания кода до тестирования и развертывания. Они анализируют код, выделяют ошибки и имеют множество других полезных функций. Они также содержат множество функций, которые большинство разработчиков не используют, хотя они необходимы для некоторых команд. В результате эти платформы занимали много места на диске и медленно запускались. Многие разработчики предпочли использовать расширенные текстовые редакторы, такие как emacs и vim, для написания своего кода.
Вскоре появилось новое поколение независимых от платформы редакторов кода. Эти легкие редакторы предоставляли множество функций, которые ранее были эксклюзивными для IDE. Я перечислил их ниже в том порядке, в котором они были выпущены:
Возвышенный текст: июль 2013 г.
Атом. ио: июнь 2015 г.
Код Visual Studio: апрель 2016 г.
Разработчики Mac имели доступ к TextMate, который был выпущен в октябре 2004 года. Система фрагментов, используемая всеми этими редакторами, возникла из TextMate. Согласно опросу разработчиков, проведенному Stack OverFlow в 2019 году, Visual Studio Code является самой популярной средой разработки кода с использованием 50,7%. Visual Studio IDE занимает второе место, а NotePad++ — третье.
Достаточно истории и статистики. Давайте покажем вам, как использовать функции Visual Studio Code.
Настройка и обновления
Установщик пакета Visual Studio Code занимает менее 100 МБ и потребляет менее 200 МБ при полной установке. Когда вы посетите страницу загрузки, она обнаружит вашу операционную систему и предложит вам правильную ссылку для загрузки.
Обновить VS Code очень просто. Когда доступно обновление, отображается уведомление. Пользователям Windows нужно нажать на уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на нее, вы установите обновление и перезапустите VS Code.
Для дистрибутивов на основе Ubuntu нажатие на уведомление об обновлении просто откроет
Пользовательский интерфейс
Давайте сначала познакомимся с пользовательским интерфейсом:
Пользовательский интерфейс VS Code
Источник изображения
Пользовательский интерфейс Visual Studio Code разделен на пять основных областей, которые можно легко настроить.
Панель активности: позволяет переключаться между представлениями: проводник, поиск, контроль версий, отладка и расширения.
Боковая панель: содержит активный вид.
Редактор: здесь вы редактируете файлы и просматриваете файлы уценки. Вы можете расположить несколько открытых файлов рядом.
Панель: отображает различные панели: встроенный терминал, панели вывода для отладочной информации, ошибок и предупреждений.
Статус: отображает информацию об открытом в данный момент проекте и файле. Также содержит кнопки для выполнения действий по управлению версиями и включения/отключения функций расширения.
Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, в раскрывающемся списке терминала есть селектор оболочки, который позволит вам выбрать другую оболочку. Если он установлен, вы можете выбрать любой из следующих вариантов:
Командная строка
PowerShell
Ядро PowerShell
Гит Баш
WSL Баш
Работа с проектами
В отличие от полноценных IDE, Visual Studio Code не обеспечивает создание проектов и не предлагает шаблоны проектов традиционным способом. Он просто работает с папками. На моем компьютере для разработки Linux я использую следующий шаблон папок для хранения и управления своими проектами:
/home/{username}/Projects/{
Папка Projects— это то, что я называю рабочим пространством. Как внештатный писатель и разработчик, я разделяю проекты в зависимости от того, в какой компании я работаю и какой репозиторий использую. Для личных проектов я храню их под своим вымышленным «названием компании». Для проектов, с которыми я экспериментирую в учебных целях и которые я не собираюсь хранить долго, я просто буду использовать такое имя, как playили tutsвместо {
Если вы хотите создать новый проект и открыть его в VS Code, вы можете выполнить следующие шаги. Откройте терминал и выполните следующие команды:
$ mkdir
$ cd
# Launch Visual Studio Code
$ code.
Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.
Если вы хотите создать новый проект, связанный с удаленным репозиторием, проще создать его на сайте репозитория — например, GitHub или BitBucket.
GitHub создать проект
Обратите внимание на все поля, которые были заполнены и выбраны. Далее заходим в терминал и выполняем следующее:
# Navigate to workspace/company/repo folder
$ cd Projects/sitepoint/github/
# Clone the project to your machine
$ git clone git@github.com: {
# Open project in VS Code
$ cd
$ code.
После запуска редактора вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+~ (тильда). Используйте следующие команды для создания package.jsonи установки пакетов:
# Generate `package.json` file with default settings
$ npm init -y
# Install package dependencies
$ npm install next
Затем откройте package.jsonи замените scriptsраздел следующим:
«scripts»: {
«dev»: «next»,
«build»: «next build»,
«start»: «next start»
}
Все окно кода Visual Studio должно выглядеть так:
Скрипт запуска VS Code
Прежде чем мы перейдем к следующему разделу, я хотел бы упомянуть, что VS Code также поддерживает концепцию многокорневых рабочих пространств. Если вы работаете со связанными проектами —
Контроль версий с помощью Git
Visual Studio Code поставляется вместе с диспетчером управления исходным кодом Git. Он предоставляет интерфейс пользовательского интерфейса, в котором вы можете создавать, фиксировать, создавать новые ветки и переключаться на существующие. Давайте зафиксируем изменения, которые мы только что сделали в нашем проекте. На панели действий откройте панель управления исходным кодом и найдите кнопку «Добавить все изменения», как показано ниже.
Контроль исходного кода VS Code
Нажмите здесь. Затем введите сообщение фиксации «Установлены зависимости next.js», затем нажмите кнопку «Зафиксировать «вверху. Он имеет значок галочки. Это зафиксирует новые изменения. Если вы посмотрите на статус, расположенный внизу, вы увидите различные значки статуса в левом углу. Это 0 ↓означает, что из удаленного репо нечего тянуть. Это 1 ↑означает, что у вас есть одна фиксация, которую нужно отправить в удаленное репо. При нажатии на нее отобразится подсказка о действии, которое будет иметь место. Нажмите OK, чтобы pullввести pushсвой код. Это должно синхронизировать ваше локальное репо с удаленным репо.
Чтобы создать новую ветку или переключиться на существующую ветку, просто щелкните имя ветки master в строке состояния в левом нижнем углу. Откроется панель ветки, чтобы вы могли выполнить действие.
Действия ветки VS Code
Проверьте следующие расширения для еще большего удобства работы с Git:
Go Lens
История Git
Поддержку другого типа SCM, например SVN, можно добавить, установив соответствующее расширение SCM из магазина.
Создание и запуск кода
На панели действий вернитесь к панели проводника и используйте кнопку «Новая папка «, чтобы создать папку pagesв корне проекта. Выберите эту папку и с помощью кнопки «Новый файл» создайте файл pages/index.js. Скопируйте следующий код:
function HomePage () {
return
;
}
export default HomePage;
В панели проводника вы должны увидеть раздел NPM Scripts. Разверните это и наведите курсор на dev. Рядом runс ним появится кнопка (значок воспроизведения). Нажмите на нее, и это запустит сервер разработки Next.js внутри встроенного терминала.
Скрипт запуска VS Code
Это должно занять несколько секунд, чтобы раскрутиться. Используйте Ctrl+ Clickна
Настройки пользователя и рабочей области
Чтобы получить доступ к настройкам предпочтений VS Code, используйте сочетание клавиш Ctrl+,. Вы также можете получить к нему доступ с помощью команды меню, например:
В Windows/Linux — «Файл «> «Настройки «> «Настройки «.
В macOS — Код > Настройки > Настройки
По умолчанию должен появиться графический интерфейс редактора настроек. Это помогает пользователям легко вносить изменения в настройки, поскольку доступны тысячи редактируемых настроек. Редактор настроек предоставляет понятные имена и описание того, что делает каждая настройка. Кроме того, связанные настройки сгруппированы вместе, и есть панель поиска для поиска конкретной настройки.
Панель настроек VS Code
При изменении настроек с помощью редактора обратите внимание на активную область вверху. Обратите внимание, что не все настройки можно настроить через графический интерфейс. Для этого вам нужно отредактировать файл settings.jsonнапрямую. Прокрутив вниз редактор настроек, вы увидите ярлык, который приведет вас к этому файлу.
Есть две разные области, в которых классифицируются параметры кода Visual Studio:
Настройки пользователя: настройки хранятся под учетной записью пользователя. Они повлияют на все проекты, над которыми вы работаете.
Рабочая область: настройки хранятся в папке проекта или рабочей области. Они будут применяться только в этом конкретном проекте.
В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:
Окна:%APPDATA%\Code\User\settings.json
макОС: $HOME/Library/Application Support/Code/User/settings.json
Линукс: $HOME/.config/Code/User/settings.json
Для Workspace просто создайте папку.vscodeв корне вашего проекта. Затем создайте файл settings.jsonвнутри этой папки. Если вы работаете с панелью редактора настроек, она сделает это за вас автоматически, когда вы измените настройки в области рабочей области. Вот подмножество глобальных настроек, с которыми я предпочитаю работать:
{
«editor.minimap.enabled»: false,
«window.openFoldersInNewWindow»: «on»,
«diffEditor.ignoreTrimWhitespace»: false,
«files.trimTrailingWhitespace»: true,
«javascript.updateImportsOnFileMove.enabled»: «always»,
«workbench.editor.enablePreview»: false,
«workbench.list.openMode»: «doubleClick»,
«window.openFilesInNewWindow»: «default»,
«editor.formatOnPaste»: true,
«editor.defaultFormatter»: «esbenp.prettierVS Code»,
«editor.formatOnSave»: true,
«editor.tabSize»: 2,
«explorer.confirmDelete»: false
}
Я склонен работать с несколькими проектами одновременно, поэтому настройка window.openFoldersInNewWindowпозволяет мне открывать новые папки проектов, не закрывая (заменяя) активную. Для editor.defaultFormatter, я установил Prettier, это расширение, которое я установил. Мы вскоре обсудим это в следующем разделе. Далее, давайте посмотрим на языковые ассоциации.
Языковая ассоциация
Я делаю много проектов, используя React. В последнее время большинство фреймворков React генерируют компоненты, используя.jsрасширение вместо.jsx. В результате форматирование и раскрашивание синтаксиса становятся проблемой, когда вы начинаете писать код JSX. Чтобы это исправить, вам нужно связать.jsфайлы с расширением JavaScriptReact. Вы можете легко сделать это, изменив языковой режим с помощью командной панели Ctrl+ Shift+. PВы также можете обновить settings.json, добавив эту конфигурацию:
{
«files.associations»: {
«*.js»: «javascriptreact»
}
}
В следующий раз, когда вы откроете файл JS, он будет рассматриваться как файл React JSX. Я указал это в своих глобальных настройках, так как часто работаю с проектами React. К сожалению, это нарушает встроенную функцию под названием Emmet. Это популярный плагин, который помогает разработчикам интуитивно понятно автозаполнять код HTML и CSS. Вы можете решить эту проблему, добавив следующую конфигурацию в settings.json:
{
«emmet.includeLanguages»: {
«javascript»: «javascriptreact»
}
}
В следующий раз, когда у вас возникнут проблемы с активацией Emmet для определенного расширения файла или языка, проверьте, можно ли решить эту проблему, добавив языковую ассоциацию в emmet.includeLanguages. Для получения дополнительной информации ознакомьтесь с официальной документацией по VS Code Emmet.
Горячие клавиши
До сих пор мы рассмотрели два сочетания клавиш:
Ctrl+,: открыть настройки
Ctrl+ Shift+ P: Открыть палитру команд
Палитра команд обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетания клавиш для стандартных операций. Если вы устанавливаете расширение, здесь будут перечислены все действия, запускаемые вручную. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет собственный встроенный модуль форматирования. Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию Default Formatter. Вот пример того, как я установил его у себя:
{
«editor.defaultFormatter»: «esbenp.prettierVS Code»
}
Вы также можете указать другой модуль форматирования для определенного языкового режима. Вот еще несколько сочетаний клавиш, которые вам нужно запомнить:
Ctrl+ Pпозволит вам перейти к любому файлу или символу, введя его имя
Ctrl+ Tabбудет циклически просматривать последний открытый набор файлов
Ctrl+ Shift+ Oпозволит вам перейти к определенному символу в файле
Ctrl+ Gпозволит вам перейти к определенной строке в файле
Вот мои любимые команды, которые я часто использую при написании кода:
Ctrl+ D: нажмите несколько раз, чтобы выбрать идентичные ключевые слова. Когда вы начинаете печатать, он переименовывает все выбранные ключевые слова
Ctrl+ Shift+ Up/Down: добавить курсор выше или ниже, чтобы редактировать несколько строк одновременно
Alt+ Shift+ Click: добавление курсора в несколько мест для одновременного редактирования разных разделов кода.
Ctrl+ J: добавить 2 или более строк в одну. Отлично работает, если у вас активен форматтер при редактировании кода.
Ctrl+ F: Поиск по ключевому слову в текущем файле
Ctrl+ H: Поиск и замена в текущем файле
Ctrl+ Shift+ F: Поиск во всех файлах
Если вы посетите параметры меню, вы найдете сочетания клавиш для большинства команд. Лично я так и не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code,
Возможности редактора кода
В этом разделе мы быстро рассмотрим различные удобные для разработчиков функции, которые предоставляет Visual Studio Code, чтобы помочь вам писать более быстрый, чистый и удобный для сопровождения код.
Интеллисенс
Это популярная функция, также известная как «дополнение кода» или автозаполнение. По умолчанию VS Code предоставляет Intellisense для:
JavaScript, TypeScript
HTML
CSS, SCSS и меньше
По мере ввода кода будет появляться всплывающее окно со списком возможных вариантов. Чем больше вы печатаете, тем короче становится список. Вы можете нажать Enterили Tabпосле того, как нужное ключевое слово будет выделено, чтобы автоматически заполнить код. Нажатие Escудалит всплывающее окно. Вставка символа. в конце ключевого слова или нажатие Ctrl+ пробел вызовет появление всплывающего окна IntelliSense.
Если вы работаете с языком, который не поддерживается по умолчанию, вы можете установить языковое расширение из магазина, чтобы активировать IntelliSense для нужного языка программирования. Ознакомьтесь с официальной документацией, чтобы узнать больше о том, как настроить IntelliSense.
Фрагменты
Ввод повторяющегося кода, такого как ifоператоры, forциклы и объявления компонентов, может быть немного утомительным. Вы можете копировать и вставлять код, чтобы работать быстрее. К счастью, Visual Studio Code предлагает функцию под названием Snippets, которая представляет собой просто шаблоны кода. Например, вместо того, чтобы вводить console.log, просто введите, logи IntelliSense предложит вставить фрагмент для вас.
Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое запускает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Палитра команд > Вставить фрагменты:
вставлять фрагменты
Прокрутите вверх и вниз, чтобы просмотреть весь список. Обратите внимание, что в большинстве фрагментов есть позиции табуляции, которые позволяют заменять соответствующие разделы кода при их вставке. Вы можете найти больше расширений сниппетов на торговой площадке. Вы также можете создать свой собственный. В этой статье показано, как сделать и то, и другое. Вы можете проверить официальные документы для получения дополнительной информации о том, как определить свои собственные фрагменты.
Форматирование
Часто при вводе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:
отступ с пробелом против табуляции
заканчивается точкой с запятой
двойные кавычки или одинарные кавычки
Форматирование важно, так как оно делает код читабельным. Однако это может занять много времени, когда вы сталкиваетесь с большими разделами неформатированного кода. К счастью, Visual Studio Code может выполнить форматирование за вас с помощью одной команды. Вы можете выполнить команду форматирования через палитру команд. Visual Studio Code по умолчанию поддерживает форматирование для следующих языков:
JavaScript
Машинопись
JSON
HTML
Вы можете настроить поведение форматирования Visual Studio Code, изменив следующие параметры на trueили false:
editor.formatOnType: отформатировать строку после ввода
editor.formatOnSave: форматировать файл при сохранении
editor.formatOnPaste: отформатировать вставленный контент
Однако встроенные средства форматирования могут не соответствовать вашему стилю кодирования. Если вы работаете с такими фреймворками, как React, Vue или Angular, вы обнаружите, что встроенные форматировщики портят ваш код.
