Visual Studio Code: мощное руководство пользователя
Эта статья написана для начинающих пользователей, которые могут впервые использовать Visual Studio Code. VS Code, как известно, считается «легковесным» редактором кода. По сравнению с редакторами с полной интегрированной средой разработки (IDE), которые занимают гигабайты дискового пространства, VS Code использует менее 200 МБ при установке.
Несмотря на термин «легкий», Visual Studio Code предлагает огромное количество функций, которые продолжают расти и улучшаться с каждым новым обновлением. В этом руководстве мы рассмотрим наиболее популярные функции. У каждого программиста есть свой собственный набор инструментов, который они обновляют всякий раз, когда обнаруживаются новые рабочие процессы. Если вы хотите изучить каждый инструмент и функцию VS Code, ознакомьтесь с их официальной документацией. Кроме того, вы можете отслеживать обновления для новых и улучшенных функций.
Предпосылки
Чтобы следовать этому руководству, вы должны владеть хотя бы одним языком программирования и фреймворком. Вы также должны быть знакомы с системой контроля версией git. Вам также необходимо иметь учетную запись на платформе удаленного хранилища, такой как GitHub. Я рекомендую вам настроить SSH Keys для подключения к вашему удаленному репозиторию.
Мы будем использовать минимальный проект Next.js для демонстрации возможностей VS Code. Если вы новичок в этом, не беспокойтесь, так как фреймворк и используемый язык не являются предметом данного руководства. Преподаваемые здесь навыки можно перенести на любой язык и фреймворк, с которыми вы работаете.
Немного истории
Как только вы привыкли к лучшему опыту написания кода, пришло время обновиться. Не так давно это были полностью интегрированные среды разработки:
Эти платформы обеспечивают полный рабочий процесс разработки, от написания кода до тестирования и развертывания. Они содержат множество полезных функций, таких как анализ кода и выделение ошибок. Они также содержат гораздо больше функций, которые многие разработчики не использовали, хотя они были необходимы для некоторых команд. В результате эти платформы заняли много места на диске и не запустились. Многие разработчики предпочитали использовать передовые текстовые редакторы, такие как emacs и vim, для написания своего кода.
Вскоре появился новый набор независимых от платформы редакторов кода. Они были легкими и обеспечивали множество функций, которые были в основном эксклюзивными для IDE. Я перечислил их ниже в порядке их выпуска:
Достаточно истории и статистики на данный момент. Давайте углубимся в то, как использовать функции кода Visual Studio.
Настройка и обновления
Установщик пакета кода Visual Studio занимает менее 100 МБ и потребляет менее 200 МБ при полной установке. Когда вы посещаете страницу загрузки, ваша ОС будет автоматически обнаружена, и будет выделена правильная ссылка для загрузки.
Обновление VS Code очень просто. Он отображает уведомление при каждом выпуске обновления. Пользователям Windows необходимо щелкнуть уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на это, вы установите обновление и перезапустите VS Code.
Пользовательский интерфейс
Давайте сначала познакомимся с пользовательским интерфейсом:
Пользовательский интерфейс Visual Studio Code разделен на пять основных областей, которые вы можете легко настроить.
Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, внутри выпадающего списка терминала находится селектор оболочки, который позволит вам выбрать другую оболочку. Если установлено, вы можете выбрать любой из следующих:
Работа с проектами
В отличие от полноценных IDE, Visual Studio Code не обеспечивает создание проектов и не предлагает шаблоны проектов традиционным способом. Он просто работает с папками. На моей машине для разработки Linux я использую следующий шаблон папок для хранения и управления своими проектами:
Если вы хотите создать новый проект и открыть его в VS Code, вы можете использовать следующие шаги. Откройте терминал и выполните следующие команды:
Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.
Обратите внимание на все поля, которые были заполнены и выбраны. Далее перейдите в терминал и выполните следующее:
Как только редактор будет запущен, вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+
(тильда). Используйте следующие команды для генерации package.json и установки пакетов:
Затем откройте package.json и замените раздел scripts следующим:
Окно кода Visual Studio должно выглядеть следующим образом:
Контроль версий с помощью Git
Visual Studio Code поставляется со встроенным менеджером контроля версий Git. Он предоставляет пользовательский интерфейс, где вы можете комментировать, фиксировать, создавать новые ветви и переключаться на существующие. Давайте передадим изменения, которые мы только что сделали в нашем проекте. На панели действий откройте панель управления источником и найдите кнопку «Stage All Changes plus», как показано ниже.
Чтобы создать новую ветку или переключиться на существующую ветку, просто нажмите на название ветки master в строке состояния в левом нижнем углу. Это выведет филиальную панель для вас, чтобы принять меры.
Проверьте следующие расширения для еще лучшего опыта работы с Git:
Поддержка другого типа SCM, такого как SVN, может быть добавлена путем установки соответствующего расширения SCM с рынка.
Создание и запуск кода
Настройки пользователя и рабочей области
По умолчанию должен появиться графический интерфейс редактора настроек. Это помогает пользователям легко вносить изменения в настройки, поскольку доступны тысячи редактируемых настроек. Редактор настроек предоставляет пользователю понятные имена и описания, что делает каждый параметр. Кроме того, связанные параметры были сгруппированы вместе, и есть панель поиска для поиска определенного параметра.
Параметры кода Visual Studio подразделяются на две разные области:
В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:
Ассоциация языков
В следующий раз, когда вы откроете файл JS, он будет рассматриваться как файл React JSX. Я указал это в своих глобальных настройках, так как я часто работаю с проектами React. К сожалению, это нарушает встроенную функцию под названием Emmet. Это популярный плагин, который помогает разработчикам автоматически заполнять HTML и CSS код очень интуитивно понятным способом. Вы можете исправить эту проблему, добавив следующую конфигурацию в settings.json :
Горячие клавиши
До сих пор мы рассмотрели два сочетания клавиш:
Command Palette обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетание клавиш для общих операций. Если вы устанавливаете расширение, любые действия, инициируемые вручную, будут перечислены здесь. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет свой собственный встроенный модуль форматирования. Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию стандартного форматера. Вот пример того, как я установил это в моем случае:
Вы также можете указать другой форматер для конкретного языкового режима. Вот еще несколько сочетаний клавиш, которые необходимо запомнить:
Вот мои любимые команды, которые я часто использую при написании кода:
Если вы зайдете в меню параметров, вы найдете горячие клавиши для большинства команд. Лично я никогда не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code из-за использования таких редакторов, как Atom, в течение длительного времени. Решением, которое я нашел, было просто установить Atom Keymap. Это позволяет мне использовать сочетание клавиш Ctrl + \ для переключения боковой панели. Если вы хотите отредактировать привязки клавиатуры самостоятельно, просто перейдите в меню File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts в macOS).
Возможности редактора кода
В этом разделе мы быстро рассмотрим различные удобные для разработчика функции, которые предоставляет Visual Studio Code, чтобы помочь вам писать более быстрый и более понятный код.
Intellisense
Это популярная функция, также известная как «автозавершение кода» или автозаполнение. VS Code «из коробки» предоставляет Intellisense для:
Если вы работаете с языком, который не поддерживается сразу после установки, вы можете установить языковое расширение из marketplace, чтобы активировать IntelliSense для нужного языка программирования.
Снипеты
Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое вызывает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Command Palette > Insert Snippets:
Прокрутите вверх и вниз, чтобы просмотреть весь список. Обратите внимание, что большинство фрагментов имеют табуляции, которые позволяют заменять соответствующие разделы кода при их вставке. Вы можете найти больше расширений фрагментов в marketplace. Вы также можете создать свой собственный.
Форматирование
Часто при наборе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:
Форматирование важно, так как делает код читаемым. Однако это может занять много времени, когда вы сталкиваетесь с большими разделами неформатированного кода. К счастью, Visual Studio Code может выполнить форматирование для вас с помощью одной команды. Вы можете выполнить команду форматирования через палитру команд. Visual Studio Code поддерживает форматирование для следующих языков из коробки:
Вы можете настроить форматирование кода Visual Studio, изменив следующие параметры на true или false :
Однако встроенные средства форматирования могут не соответствовать вашему стилю кодирования. Если вы работаете с такими фреймворками, как React, Vue или Angular, вы обнаружите, что встроенные средства форматирования имеют тенденцию портить ваш код. Вы можете исправить это, отключив форматирование для определенного языка:
После установки вам нужно установить его как форматировщик по умолчанию:
Также рекомендуется установить пакет prettier локально как зависимость dev:
Linting
Lint или ЛИНТЕР является инструментом, который анализирует код и проверяет на наличие синтаксических ошибок, проблем стилизации, вызовы на необъявленных переменных, использование устаревших функций, неправильного охвата и многие другие вопросы. Visual Studio Code не поставляется вместе с Linter. Тем не менее, это облегчает настройку для используемого вами языка программирования. Например, если вы работаете над новым проектом Python, вы получите приглашение установить его для вас. Вы также можете открыть панель команд ( Ctrl+ Shift+ P ) и выбрать команду Python: Select Linter.
Для JavaScript вам нужно установить расширение, такое как ESLint, которое является самым популярным. Это расширение требует, чтобы вы установили ESLint как dev-зависимость. Вам также может понадобиться один или несколько плагинов ESLint, которые помогут вам подобрать стиль и структуру кодирования, которые вы используете.
Отладка
Если вы используете операторы print для отладки, вы должны прекратить это делать, поскольку есть лучший способ отладки вашего кода. С VS Code вы можете устанавливать точки останова и проверять переменные во время работы вашего кода.
Редактирование и рефакторинг кода C++ в Visual Studio
Visual Studio предоставляет разные средства для написания, редактирования и рефакторинга кода.
IntelliSense
IntelliSense — это мощное средство завершения кода, которое предлагает символы и фрагменты по мере ввода кода. IntelliSense C++ в Visual Studio выполняется в реальном времени, анализируя вашу базу кода по мере ее обновления и предоставляя рекомендации. Чем больше символов вы вводите, тем меньше предлагается рекомендуемых результатов.
Некоторые символы пропускаются автоматически, чтобы еще больше сократить список результатов. Например, обращаясь извне класса к элементам его объекта, вы не сможете просмотреть частные элементы (по умолчанию) или защищенные элементы (если вы не в контексте дочернего класса). Вы можете настроить фильтрацию с помощью кнопок в нижней части.
Параметр Режим фильтрации списка членов определяет, какие виды автозавершения IntelliSense вы видите. По умолчанию для этого параметра установлено значение Нечеткий. Если при нечетком поиске соответствий у вас есть символ, который называется MyAwesomeClass, вы можете ввести MAC и найти класс в предложениях автозаполнения. Алгоритм нечеткого поиска задает минимальный порог, которому должны соответствовать символы, отображаемые в списке. При интеллектуальной фильтрации будут отображаться все символы, которые содержат подстроки, соответствующие тому, что вы ввели. При фильтрации по префиксу выполняется поиск строк, которые начинаются с введенных вами символов.
IntelliCode
IntelliCode — это средство IntelliSense на основе ИИ, которое помещает предположительно наиболее подходящий результат в верхнюю часть списка завершения. Для создания рекомендаций IntelliCode анализирует тысячи проектов с открытым кодом на GitHub, каждый из которых имеет более 100 звезд. В сочетании с контекстом кода список завершения используется для популяризации распространенных приемов работы.
В Visual Studio 2017 IntelliCode предоставляется как расширение в Visual Studio Marketplace.
Прогнозная технология IntelliSense (экспериментальная функция)
Прогнозная технология IntelliSense — это экспериментальная функция, которая ограничивает число результатов, отображаемых в раскрывающемся списке IntelliSense, на основе контекста. Алгоритм применяет сопоставление типов, чтобы отобразить только те результаты, которые соответствует ожидаемому типу. Самый просто пример: если ввести int x = и вызвать раскрывающийся список IntelliSense, вы увидите только целые числа или функции, которые их возвращают. Эта функция отключена по умолчанию, так как она еще разрабатывается. Лучше всего она работает с глобальными символами; функции-члены еще не поддерживаются. Можно включить эту функцию, введя «прогнозный» в поле быстрого запуска или последовательно выбрав Средства > Параметры > Текстовый редактор > C/C++ > Экспериментальные функции > Включить прогнозный IntelliSense.
Чтобы переопределить прогнозный IntelliSense и отобразить длинный список, нажмите клавиши CTRL+J. Если прогнозный IntelliSense включен, вызов CTRL+J удалит прогнозный фильтр. Повторное нажатие CTRL+J снова удалит фильтр специальных возможностей из результатов списка членов, где это применимо. Использование кнопки ([+]) в раскрывающемся списке IntelliSense аналогично нажатию клавиш CTRL+J. Наведите указатель на кнопку, чтобы увидеть подсказку о том, что сейчас отображается.
На предыдущем снимке экрана показаны несколько кнопок в раскрывающемся списке. Они позволяют включить фильтры IntelliSense для получения разных типов результатов:
Кнопка отображается, только если это применимо в текущем сеансе IntelliSense. Как правило, все кнопки одновременно не отображаются.
Шаблон IntelliSense
Когда курсор находится в определении шаблона, отображается строка шаблона. Она позволяет предоставлять аргументы примера шаблона для IntelliSense.
Изменения, вносимые в окне, применяются непосредственно к исходному коду, поэтому результаты отображаются в реальном времени.
Строка шаблона может автоматически предлагать вероятные варианты на основе экземпляров в коде. Щелкните Добавить все существующие экземпляры, чтобы просмотреть список всех аргументов, которые использовались для создания экземпляра шаблона, во всей базе кода.
В окне в нижней части редактора отображаются расположение и аргументы каждого экземпляра.
Подчеркивание ошибок и быстрые исправления
Если редактор определяет ошибку в коде, он подчеркнет ее цветной волнистой линией. Красные волнистые линии указывают на код, который не будет скомпилирован. Зеленые волнистые линии указывают на другие проблемы, которые также могут быть серьезными. Вы можете открыть окно Список ошибок, чтобы просмотреть дополнительные сведения о проблемах.
Для некоторых типов ошибок (а также общих шаблонов создания кода) редактор будет предлагать быстрое исправление в виде лампочки, которая отображается, если навести указатель мыши на волнистую линию. Щелкните стрелку вниз, чтобы просмотреть предложения.
Change tracking
При каждом изменении файла слева отображается желтая полоска, указывающая на то, что внесены несохраненные изменения. При сохранении файла полоска становится зеленой. Зеленая и желтая полоски отображаются, пока документ открыт в редакторе. Они представляют изменения, внесенные с момента последнего открытия документа.
Перенос кода
Строки кода можно перемещать вверх и вниз. Для этого выберите их, удерживая нажатой клавишу ALT и одну из клавиш со стрелками (вверх или вниз).
Вставка фрагментов кода
Фрагмент — это предварительно определенная часть исходного кода. Щелкните правой кнопкой мыши одну точку или выбранный текст для вставки фрагмента или размещения выбранного текста внутри фрагмента. На следующем рисунке показана процедура размещения выбранного оператора в цикле for. На последнем изображении желтым цветом выделены редактируемые поля, доступ к которым осуществляется с помощью клавиши TAB. Дополнительные сведения см. в статье Фрагменты кода.
Добавить класс
Добавьте новый класс из меню Проект или контекстного меню в обозревателе решений:
Можно также использовать мастер классов для изменения или просмотра существующего класса.
Рефакторинг
Рефакторинг доступен в контекстном меню быстрых действий. Или можно щелкнуть лампочку в редакторе. Некоторые также находятся в меню Правка > Рефакторинг. Эти функции включают перечисленные ниже.
Применение стиля кода с помощью ClangFormat и EditorConfig
В Visual Studio, начиная с версии 2017, реализована поддержка ClangFormat — популярной служебной программы для форматирования кода C++ на основе Clang/LLVM. Введите ClangFormat в поле быстрого запуска, чтобы настроить использование одного из следующих распространенных форматов:
Эти файлы легко использовать совместно с помощью системы управления версиями, следовательно, вы можете применять соглашения о написании кода во всей группе разработчиков.
Visual Studio, начиная с версии 2017, также поддерживает EditorConfig — программу, которая работает аналогичным образом. Однако ClangFormat имеет больше параметров стиля, чем EditorConfig, включая правила, относящиеся к C++. С помощью EditorConfig вы можете создавать и размещать файлы .editorconfig в разных папках вашей базы кода, чтобы определять стили кода для этих папок и подпапок. Файл .editorconfig заменяет все другие файлы .editorconfig в родительских папках, перезаписывая все параметры форматирования, которые можно настроить, выбрав Средства > Параметры. Вы можете задать правила, определяющие использование табуляции и пробелов, настраивающие размер отступов и многое другое. См. подробнее о создании переносимых настраиваемых параметров редактора с помощью EditorConfig.
Другие параметры форматирования
Поле быстрого запуска — это самый быстрый способ найти нужный параметр или средство. Поле расположено в главном меню. Просто начните ввод и список автоматического завершения отфильтрует результаты.
Чтобы задать параметры форматирования, например отступы, завершение скобок и раскраску, введите C++ Formatting (Форматирование C++) в поле быстрого запуска.
Другие параметры форматирования можно настроить в главном меню, выбрав Изменить > Дополнительно.
Экспериментальные функции, которые могут присутствовать или отсутствовать в будущих версиях Visual Studio, можно найти в диалоговом окне экспериментальных функций C++ для текстового редактора. В Visual Studio, начиная с версии 2017, в этом диалоговом окне можно включить прогнозную технологию IntelliSense.
27 удивительных инструментов VS Code для современных JavaScript-разработчиков
Visual Studio Code (его ещё называют VS Code и VSCode) — это экономичный но мощный кросс-платформенный редактор кода, выполненный в виде настольного приложения. По словам автора материала, перевод которого мы сегодня публикуем, VS Code поддерживает множество инструментов разработки — вроде TypeScript и отладчика Chrome. Это, а также то, что к нему написано невероятное количество опенсорсных расширений, делает VS Code весьма популярным и любимым многими редактором.
Если вы хотите добавить в свой арсенал JavaScript-программиста что-то новое — автор материала надеется, что вы встретите здесь что-нибудь такое, что вам пригодится. Не все из рассмотренных здесь двадцати семи инструментов предназначены исключительно для JS-разработки. Но все они с успехом могут применяться теми, кто пишет на JavaScript.
1. Project Snippets
Расширение Project Snippets, мой фаворит на все времена, создано на основе встроенного в VS Code инструмента User Snippets.
Если вы не знакомы с этой стандартной возможностью VS Code, то знайте, что она позволяет пользователю оформлять собственные фрагменты кода в виде так называемых сниппетов. Делается это для того, чтобы многократно использовать их в своих проектах. Что значит «многократно использовать»?
Рассмотрим пример. Предположим, вы обнаруживаете, что вам часто приходится писать один и тот же шаблонный код. Например — такой:
Подобный код можно оформить в виде сниппета. В результате, вместо того, чтобы вводить всё это с клавиатуры (или копировать откуда-нибудь), вам нужно будет лишь ввести так называемый префикс, после чего в редакторе появится код, соответствующий этому префиксу.
Создадим сниппет на основе фрагмента вышеприведённого кода. Для этого файл typescriptreact.json нужно привести к следующему виду:
Некоторое неудобство использования глобальных сниппетов заключается в том, что они оказываются доступными для всех разрабатываемых вами проектов (впрочем, в некоторых случаях, для сниппетов общего назначения, это, наоборот, удобно). Но некоторые проекты могут быть сконфигурированы по-особенному. В результате, если то, что используется в таких проектах, не нужно во всех проектах, глобальный файл сниппетов может оказаться не лучшим решением задачи оформления фрагментов многократно используемого кода.
Предположим, в некоем проекте используется особая структура папок. Для упрощения работы над этим проектом в файле typescriptreact.json может быть подготовлено нечто, подобное следующему коду:
Такие конструкции совершенно нормально могут применяться в JavaScript. Но что если мы используем в качестве инструмента для стилизации проекта библиотеку styled-components? В таком случае подобный синтаксис нас не устроит. Ведь в styled-components используются обычные CSS-конструкции!
Собственно говоря, здесь нам на помощь и приходит расширение Project Snippets.
Это расширение позволяет создавать сниппеты, действующие на уровне проекта или рабочего пространства. Такие сниппеты не конфликтуют со сниппетами, созданными для других проектов и не мешают при работе с ними. Это очень удобно.
2. Better Comments
Если вам нравится писать комментарии в своём коде, тогда вы, вероятно, сталкивались с тем, что иногда непросто бывает найти комментарий, написанный когда-то давно. Причиной этого может быть то, что код может немного разрастись.
С помощью расширения Better Comments можно выделять комментарии разными цветами.
Использование расширения Better Comments
3. Bracket Pair Colorizer
Когда мне довелось впервые увидеть скриншоты с результатами работы расширения Bracket Pair Colorizer, мне стало ясно, что это расширение просто обязано появиться в моём наборе инструментов.
Программирование — это моя страсть, и цветовое выделение скобок — это то, что, определённо, помогает мне полнее наслаждаться этим занятием.
Использование расширения Bracket Pair Colorizer
4. Material Theme
Тема Material, представленная расширением Material Theme, это грандиозное явление, которое теперь доступно и любителям VS Code. Её использование позволяет привести код к следующему виду.
Оформление кода с использованием темы Material
Это, должно быть, одна из лучших существующих тем.
5. @typescript-eslint/parser
Если вы пишете на TypeScript — вам, скорее всего, стоит рассмотреть возможность перевода своих TSLint-конфигураций на typescript-eslint. Дело в том, что, по некоторым данным, поддержка TSLint компанией Palantir будет через некоторое время прекращена. Вместо TSLint там будет использоваться typescript-eslint.
Проекты постепенно переходят на использование пакета @typescript-eslint/parser и связанных с ним пакетов. Делается это в стремлении подготовиться к будущим изменениям экосистемы TS-разработки. Если вам нравится Prettier, то вы сможете пользоваться этим инструментом, задействовав при этом большинство правил ESLint.
6. Stylelint
Stylelint — это тот инструмент, который всегда используется в моих проектах. Это так по нескольким причинам:
7. Markdownlint + docsify
Не знаю о том, как другие разработчики делают заметки во время мозговых штурмов, но мне нравится делать записи в формате Markdown. Это простой и удобный формат. Существует множество инструментов, которые помогают писать Markdown-тексты. Среди таких инструментов можно отметить markdownlint.
Я, кроме того, обычно использую во всех своих проектах docsify. Этот инструмент поддерживает формат Markdown и другие полезные возможности.
8. TODO Highlight
У меня есть привычка — писать прямо в коде заметки по поводу того, что нужно сделать в проекте. В результате мне интересны расширения вроде TODO Highlight. Это расширение помогает работать с TODO-заметками.
9. Import Cost
Расширение Import Cost принадлежит к разряду инструментов, полезность которых можно ощутить при их первом применении. Однако после того как подобным инструментом некоторое время попользуются, может оказаться так, что нужды в нём больше не возникнет. Дело в том, что со временем разработчик уже точно знает о том, какие именно сведения выдаст подобное средство. Однако я, всё равно, рекомендую некоторое время этим расширением попользоваться. Вполне может оказаться так, что оно принесёт вам пользу.
10. Highlight Matching Tag
Иногда поиск закрывающей части некоего тега может превратиться в непростое занятие. В таких случаях полезным может оказаться расширение Highlight Matching Tag.
Использование расширения Highlight Matching Tag
11. vscode-spotify
Иногда мне надоедает то, что в процессе работы в VS Code приходится постоянно переходить в музыкальный проигрыватель для того, чтобы переключить трек, а потом опять возвращаться к своим делам.
Эту проблему мне помогает решить расширение vscode-spotify, которое позволяет управлять проигрывателем Spotify прямо из VS Code.
Благодаря этому расширению можно видеть в статус-баре редактора сведения о проигрываемой композиции. Для переключения записей можно использовать горячие клавиши, управлять Spotify из VS Code можно и с использованием кнопок.
12. GraphQL for VSCode
Популярность технологии GraphQL растёт, примеры её применения можно увидеть практически во всех уголках JavaScript-разработки. Поэтому многим, скорее всего, пригодится расширение GraphQL for VSCode.
Это расширение поддерживает подсветку синтаксиса GraphQL, линтинг, автозавершение кода.
Я много пользуюсь Gatsby, поэтому мне ежедневно приходится читать GraphQL-код. Расширение GraphQL for VSCode мне в этом помогает.
13. Indent-Rainbow
Расширение Indent-Rainbow похоже на вышеописанное расширение Highlight Matching Tag. Если иногда вам непросто бывает разобраться в отступах — это расширение поможет вам справиться с проблемой, улучшив читаемость кода. Вот пример его использования.
Использование расширения Indent-Rainbow
14. Color Highlight
Color Highlight — это одно из тех расширений, о котором меня спрашивают: «Где удалось его найти?». Данное расширение помогает в работе с цветом. Выглядит это так, как показано ниже.
Использование расширения Color Highlight
15. Color Picker
Color Picker — это расширение для VS Code, которое предлагает пользователю графический интерфейс, помогающий выбирать цвета для использования в CSS.
16. REST Client
Когда мне довелось впервые попробовать расширение REST Client — мне оно не показалось особенно полезным. Оно не выдерживало сравнения с чем-то вроде Postman.
Но постепенно оказалось, что это расширение оказывает огромное положительное влияние на мою работу. Особенно — тогда, когда мне нужно было тестировать некие API.
При работе с ним достаточно, например, создать новый файл, в котором будет всего одна строчка:
Использование расширения REST Client
Это расширение, кроме того, позволяет настраивать параметры или данные для POST-запросов. Делается это с помощью буквально пары строк кода:
Подобная конструкция приведёт к выполнению POST-запроса с параметрами < "email": "someemail@gmail.com", "password": 1 >.
И это, на самом деле, лишь предельно сжатое описание возможностей данного расширения.
17. Settings Sync
Мне очень не нравилось, при настройке нового рабочего места, составлять списки используемых мной расширений, потом сохранять их в чём-то вроде Evernote, потом всё это вручную восстанавливать.
Автоматизировать этот процесс мне удалось с помощью расширения Settings Sync.
18. Todo Tree
Расширение Todo Tree помогает находить TODO-комментарии в коде проектов. Оно оформляет эти комментарии в формате дерева, выводимого в левой части экрана.
Использование расширения Todo Tree
19. Toggle Quotes
Toggle Quotes — это интересное расширение, которое позволяет менять вид используемых в коде кавычек. Оно оказывается очень кстати, например, в тех случаях, когда нужно изменить обычные кавычки на обратные кавычки (backticks). Это может понадобиться при интерполяции строк и может оказаться особенно полезным тогда, когда Prettier оформил строки с использованием обычных одинарных кавычек.
Использование расширения Toggle Quotes
20. Better Align
Расширение Better Align позволяет выравнивать код без его предварительного выделения.
21. Auto Close Tag
Этой простой и удобной функции нет в стандартных возможностях VS Code, поэтому данное расширение я считаю весьма полезным.
22. Sort Lines
Мне не нравятся массивы, элементы которых расположены не в алфавитном порядке. Быстро справиться с этой проблемой мне помогает расширение Sort Lines. Если вам тоже не нравятся подобные массивы — оно может пригодиться и вам.
23. VSCode Google Translate
Возможно, я — единственный человек, который считает полезным расширение VSCode Google Translate. Но мне оно помогает, так как мне приходится принимать участие в работе над проектами, над которыми вместе со мной трудятся люди, говорящие на разных языках. Это расширение может пригодиться тем, кто, для перевода чего-либо, не хочет сворачивать VS Code.
24. Prettier
Prettier — это расширение для VS Code, которое умеет автоматически форматировать код, написанный на JavaScript, на TypeScript и на других языках.
25. Material Icon Theme
Значки из пакета Material Icon Theme мне нравятся больше, чем другие. С их помощью гораздо легче различать типы файлов. Особенно это справедливо для тех случаев, когда в VS Code используется тёмная тема.
26. IntelliSense for CSS class names in HTML
27. Path Intellisense
Расширение Path Intellisense помогает автоматически завершать ввод имён файлов.
Итоги
Надеемся, среди расширений для VS Code, о которых вы только что прочли, найдётся что-то такое, что вам пригодится.
Уважаемые читатели! Какие расширения для VS Code вы добавили бы к тем, о которых шла речь в этой статье?