Как использовать код Visual Studio

Visual Studio Code, VSCode для друзей, - невероятно мощный редактор, популярность которого постоянно растет. Узнайте, почему, и его основные функции для разработчиков

Вступление

С самого начала редакторы - странный зверь. Некоторые усиленно отстаивают свой выбор редактора. В мире Unix у вас естьEmacsпротивvi«Войны», и я как бы представляюПочемутак много времени уходит на обсуждение преимуществ одного по сравнению с другим.

Я использовал множество редакторов и IDE за последние несколько лет. Я помню TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. Разница между IDE и редактором в основном заключается в наборе функций и сложности.

Я в основном предпочитаю редактор IDE, так как он быстрее и меньше мешает.

Последние 12 месяцев я использую VS Code, редактор с открытым исходным кодом от Microsoft, и он быстро стал моим любимым редактором.

Стоит ли переходить на VS Code? И почему?

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

Этот редактор основан на многолетнем редакционном опыте Microsoft.

Код редактора полностью открыт, и за его использование не требуется никакой оплаты.

Оно используетЭлектронв качестве основы, что позволяет ему быть кроссплатформенным и работать на Mac, Windows и Linux. Он построен с использованием Node.js, и вы можете расширить его с помощью JavaScript (что делает его выигрышным для всех нас, разработчиков JavaScript).

Этобыстрый, самый быстрый редактор, который я использовал после Sublime Text.

Это вызвало энтузиазм сообщества: есть тысячирасширения, некоторые официальные, некоторые сделаны сообществом, и этопобедившие опросы.

Microsoft выпускает обновление каждый месяц. Частые обновления способствуют инновациям, и Microsoft прислушивается к своим пользователям, сохраняя при этом платформу как можно более стабильной (я должен сказать, что у меня никогда не было проблем с VS Code за 1 год использования его каждый день почти весь день).

Начиная

Домашняя страница Visual Studio Code в Интернете:https://code.visualstudio.com/.

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

VS Code site

Процесс установки зависит от платформы, и вы должны к этому привыкнуть.

При первом запуске редактора вы увидите экран приветствия:

Welcome screen for VS Code

Слева находится панель инструментов с 5 значками. Это дает доступ к:

  • Проводник
  • Поиск
  • Управления источником
  • Отладчик
  • Расширения

Исследователь

Начнем исследование с проводника (каламбур).

VS Code Explorer

Нажмите кнопку «Открыть папку» на боковой панели илиOpen folder...ссылку на странице приветствия. Оба вызовут окно выбора файлов.

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

VS Code покажет содержимое этой папки в вашем представлении:

Opened folder

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

Если вы выберете файл слева, этот файл откроется на главной панели:

Files list

и если вы начнете его редактировать, обратите внимание, что рядом с именем файла на вкладке, а также на боковой панели появится точка:

Editing file

НажатиеCMD+Pпокажет вам средство быстрого выбора файлов, чтобы легко перемещать файлы в больших проектах:

Quick file picker

Вы можете скрыть боковую панель, на которой размещен файл, с помощью ярлыкаCMD+B.

Примечание. Я использую сочетания клавиш Mac. В большинстве случаев в Windows и Linux вы просто меняете CMT на CTRL, и это работает, но не всегда. Распечатайте свойсправочник по сочетаниям клавиш.

Второй значок на панели инструментов - «Поиск». При нажатии открывается интерфейс поиска:

Search

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

Чтобы выполнить поиск, нажмитеenter.

Щелчок по символу ▷ слева включает инструмент поиска и замены.

При нажатии на 3 точки отображается панель, которая позволяет вам просто включать файлы определенного типа и исключать другие файлы:

Search and replace

Управления источником

Вкладка Source Control включается нажатием третьего значка на панели инструментов.

Source control

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

Щелчок по первому значку сверху с логотипом Git позволяет нам инициализировать репозиторий Git:

Git repo is initialized

ВUрядом с каждым файлом означает, что он был обновлен с момента последней фиксации (поскольку мы никогда не выполняли фиксацию, все файлы обновляются).

Создайте первую фиксацию, написав текстовое сообщение и нажавCmd-Enterили щелкнув значок ✔︎ вверху.

First commit

Обычно я устанавливаю это так, чтобы изменения выполнялись автоматически при их фиксации.

Значок с тремя точками при нажатии предлагает множество вариантов взаимодействия с Git:

Git options

Отладчик

Четвертый значок на панели инструментов открывает отладчик JavaScript. Это заслуживает отдельной статьи. А пока проверьтеофициальные документы.

Расширения

Пятый значок переносит нас в расширения.

Extensions

Расширения - одна из отличительных черт VS Code.

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

У меня установлено много расширений.

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

Вы можете отключить устанавливаемое расширение и включать его только тогда, когда оно вам нужно.

Вы также можете отключить расширение для определенной рабочей области (о рабочих областях мы поговорим позже). Например, вы не хотите включать расширения JavaScript в проекте Go.

Есть список рекомендуемых расширений, в который входят все самые популярные инструменты.

Recommended extensions

Поскольку я редактирую множество файлов разметки для своего блога, VS Code предлагает мнеmarkdownlintрасширение, которое обеспечивает линтинг и проверку синтаксиса для файлов Markdown.

В качестве примера установим его.

Сначала я проверяю количество просмотров. Это 1,2 миллиона, так много! И отзывы положительные (4.55). При нажатии на имя расширения справа открываются подробные сведения.

Extension details

Нажатие зеленой кнопки Install запускает простой процесс установки. Он делает все за вас, и вам просто нужно нажать кнопку «Перезагрузить», чтобы активировать его, что в основном перезагружает окно редактора.

Выполнено! Давайте протестируем это, создав файл уценки с ошибкой, например, с отсутствующимaltатрибут на изображении. Он успешно сообщает нам об этом:

markdownlint extension

Ниже я расскажу о некоторых популярных расширениях, которые вы не хотите пропустить, и о тех, которые я использую чаще всего.

Терминал

VS Code имеет встроенный терминал.

Вы можете активировать его из менюView ➤ Integrated Terminal, или используяCMD+\`, и он откроется с вашей оболочкой по умолчанию.

The terminal

Это очень удобно, потому что в современной веб-разработке почти всегда естьnpmили жеyarnпроцесс работает в фоновом режиме.

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

Multiple terminals

Палитра команд

Палитра команд - очень мощный инструмент. Вы включаете его, нажавView ➤ Command Palette, или используяCMD+SHIFT+P

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

Я выполняю следующие общие операции:

  • Расширения: установка расширений
  • Предпочтения: Цветовая темадля смены цветовой темы (иногда меняю с ночи на день)
  • Форматировать документ, который автоматически форматирует код
  • Выполнить код, который предоставляется Code Runner, и выполняет выделенные строки JavaScript

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

Помните, когда вы набиралиCMD+Pчтобы увидеть список файлов, раньше? Это ярлык для конкретной функции палитры команд. Есть и другие:

  • Ctrl-Shift-Tabпоказывает активные файлы
  • Ctrl-Gоткрывает палитру команд, позволяющую ввести номер строки для перехода
  • CMD+SHIFT+Oпоказывает список символов, найденных в текущем файле

Какие символынаходятсязависит от типа файла. В JavaScript это могут быть классы или функции. В Markdown заголовки разделов.

Темы

Вы можете переключить используемую цветовую тему, нажавCMD-k+CMD-t, или вызвавПредпочтения: Цветовая темакоманда.

Это покажет вам список установленных тем:

Themes

вы можете щелкнуть по одному или переместиться с помощью клавиатуры, и VS Code покажет вам предварительный просмотр. Нажмите Enter, чтобы применить тему:

Light Theme

Темы - это просто расширения. Вы можете установить новые темы, перейдя в менеджер расширений.

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

Моя любимая тема -Аю, который обеспечивает отличный стиль в любое время дня, ночи, утра / вечера и после обеда.

Настройка

Тема - это всего лишь одна настройка, которую вы можете сделать.

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

Вы можете изменить их, перейдя вPreferences ➤ File Icon Theme. У Ayu есть собственная тема значков, которая идеально соответствует цветам темы:

Ayu Light

Все те настройки, которые мы сделали до сих пор, тема и тема значков, сохраняются в настройках пользователя.

Идти кPreferences ➤ Settings(также можно добраться черезCMD-,) чтобы увидеть их:

Settings

В представлении слева для удобства отображаются настройки по умолчанию, а справа - переопределенные настройки. Вы можете увидеть название темы и тему значков, которые мы создали, вworkbench.colorThemeиworkbench.iconTheme.

Я увеличил масштаб, используяCMD-+, и этот параметр также был сохранен вwindow.zoomLevel, поэтому при следующем запуске VS Code запоминает мой выбор масштабирования.

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

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

Хорошие варианты конфигурации

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

Вы можете открыть файл конфигурации JSON с помощью палитры команд и выбратьOpen Settings (JSON).

Несколько хороших параметров конфигурации, которые я установил в своем коде:

Вариант Описание
"editor.minimap.enabled": false Удалите миникарту, которая отображается справа от редактора.
"explorer.confirmDelete": false Перестаньте спрашивать у меня подтверждение, когда я хочу удалить файл (у меня есть система контроля версий!)
"explorer.confirmDragAndDrop": false Отключить подтверждение перетаскивания
"editor.formatOnSave": true Отформатируйте код автоматически, когда я его сохраню
"editor.formatOnPaste": true Отформатируйте код автоматически, когда я вставляю его в свой код
"javascript.format.enable": true Включить форматирование для кода JavaScript
"files.trimTrailingWhitespace": true Обрезать пробелы в файлах
"editor.multiCursorModifier": "alt" Нажимая клавишу Alt и щелкая мышью, я могу выбрать несколько строк.
"editor.detectIndentation": true Адаптироваться к отступу файла, полезно при редактировании кода других людей
"editor.quickSuggestionsDelay": 0 Показывать предложение кода сразу, а не через несколько секунд

Лучший шрифт для кодирования

мне нравитсяКод Фира. Это бесплатно и имеет несколько очень хороших программных лигатур, которые преобразуют общие конструкции, такие как!==и=>к более красивым символам:

Fira code

Включите его, установив шрифт и добавив его в свою конфигурацию:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

Рабочие места

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

Вы создаете рабочее пространство из существующего проекта, щелкнув значокFile ➤ Save Workspace as...меню.

Текущая открытая папка станет основной папкой рабочего пространства.

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

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

Вы можете просто работать с папками, пока у вас не появится конкретная причина, по которой вам нужно рабочее пространство.

Одна из веских причин - возможность иметь несколько отдельных корневых папок. Вы можете использоватьFile ➤ Add Folder to Workspaceчтобы добавить новую корневую папку, которая может располагаться в любом месте файловой системы, но будет отображаться вместе с другой существующей папкой, которая у вас была.

Редактирование

IntelliSense

Когда вы редактируете на одном из поддерживаемых языков (JavaScript, JSON, HTML, CSS, Less, Sass, C # иМашинопись) VS Code имеет IntelliSense, технологию, которая намекает на автозаполнение функций и параметров при их вводе.

Форматирование кода

Две удобные команды (Format DocumentиFormat Selection) доступны на палитре команд для автоформатирования кода. VS Code по умолчанию поддерживает автоматическое форматирование для HTML, JavaScript, TypeScript и JSON.

Ошибки и предупреждения

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

Warnings

Это все предупреждения или ошибки. Вы можете попытаться найти их в коде, где вы видите фрагменты, подчеркнутые красным, или вы также можете нажатьCMD-Shift-M(или выберитеView ➤ Problems)

View problems

Горячие клавиши

До сих пор я показывал вам множество сочетаний клавиш.

Запоминать их все становится сложно, но они помогают продуктивно работать. Предлагаю распечатать официальную шпаргалку по горячим клавишам,Mac,LinuxиОкна.

Раскладки

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

Команда VS Code предоставляет раскладки клавиатуры для самых популярных редакторов из коробки: vim, Sublime Text, Atom, IntelliJ, Eclipse и другие. Они доступны как плагины. ОткрывPreferences ➤ Keymaps Extensionsменю.

Фрагменты кода

Сниппеты очень крутые.

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

Для JavaScript / React одним из популярных являетсяVS Code ES7 React / Redux / React-Native / фрагменты JS

Вы просто набираетеrfe, нажмите TAB, и в вашем редакторе появится следующее:

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

таких ярлыков много, и они экономят много времени. Не только путем набора текста, но и поиска правильного синтаксиса.

Вы также можете определить свои собственные фрагменты. НажмитеPreferences ➤ User Snippetsи следуйте инструкциям, чтобы создать собственный файл фрагментов.

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

Команда интерфейса командной строки VS Code

Откройте палитру команд и найдитеinstall 'code' command in PATHкоманда.

Нажмите Enter иcodeкоманда будет доступна глобально в вашей командной строке.

Это очень полезно для запуска редактора и открытия нового окна с содержимым текущей папки сcode ..

code -nсоздаст новое окно.

Полезная вещь, о которой не всегда известно, - это то, что VS Code может быстро показать разницу между двумя файлами с помощьюcode --diff file1.js file2.js.

Решение проблем с высокой загрузкой ЦП

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

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

Больше руководств по инструментам разработчика: