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

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

Наши лучшие расширения Visual Studio Code:

  • Раскрашивание пары скобок
  • Лучшие комментарии
  • Фрагменты
  • Пик CSS
  • красивее
  • Относительный путь
  • Иконки
  • GitLens
  • Стоимость импорта
  • Уценка все в одном
  • Интеллисенс
  • Кроме того, заключительный раздел о проблемах доступности VS Code.

Давайте начнем!

Раскрашивание пары скобок

Расширение VS Bracket Pair Colorizer сопоставляет соответствующие скобки в вашем коде с тем же цветом. Это очень помогает, когда вы работаете с такими вещами, как вложенные компоненты, объекты или функции, которые все имеют квадратные или круглые скобки.

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

Лучшие комментарии

Better Comments – это расширение, используемое для написания удобных комментариев в вашем коде, что полезно для вас и всех, кто читает исходный код (особенно для команд). Описательные, удобные для человека комментарии экономят много времени для всех участников.

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

  • * для выделенного текста
  • ! для ошибок и предупреждений
  • ? для запросов и вопросов
  • // для зачеркивания
  • TODO для дел

Фрагменты

Фрагменты — отличное дополнение для повышения производительности. Snippets — это набор различных расширений для наиболее часто используемых языков программирования. Например, популярное расширение React Snippet позволяет вам использовать и создавать сокращения для того, что вы делаете снова и снова.

Некоторые популярные варианты:

  • Angular Snippets (версия 11)
  • питон
  • Фрагменты кода JavaScript (ES6)
  • Фрагменты HTML
  • Vue 3 фрагмента

Просмотр CSS

CSS Peek — отличное расширение для веб-разработчиков, поскольку оно позволяет «заглянуть» в стили для классов CSS, идентификаторов и даже тегов HTML. Это расширение похоже на функцию Brackets, называемую встроенными редакторами CSS.

CSS Peek поддерживает отслеживание определения символов для любого селектора CSS, например:

  • Peek: загружать встроенный файл CSS для быстрого редактирования (Ctrl+Shift+F12)
  • Перейти: перейти непосредственно к файлу CSS (F12)
  • Наведение: показывать определение при наведении курсора на символ (Ctrl+hover)

красивее

Расширение Prettier — это средство форматирования, которое помогает сохранять единый стиль кода. Вы можете настроить параметры так, как вам нужно, и сохранить их с помощью ярлыков. Prettier — один из самых популярных форматировщиков кода с более чем 38,5 тысячами звезд на GitHub.

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

Это расширение работает со следующими технологиями: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML и другими.

Относительный путь

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

Примечание. Это потребует некоторой настройки, если вы работаете с большим монорепозиторием.

Иконки

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

Существует несколько различных расширений Icons, в том числе

  • vscode-значки
  • Тема значка материала
  • Иконки темы материала
  • Простые иконки

GitLens

Расширение GitLens сочетает возможности Git с VSCode, что позволяет визуализировать авторство кода через Git. GitLens отлично подходит для лучшего понимания кода, поэтому вы можете узнать, кто, почему и когда код был изменен. Это также позволяет вам исследовать историю и эволюцию кодовой базы.

Он также имеет много других функций для использования, таких как:

  • Навигация по ревизиям в истории файлов
  • Аннотация текущей строки в конце строки, показывающая фиксацию
  • Аннотация в строке состояния обвинить фиксацию и автора, который последним изменил текущую строку.

Стоимость импорта

Расширение «Стоимость импорта» помогает повысить производительность, показывая предполагаемый размер пакета импорта. Это помогает избежать проблем, отслеживая размер добавленных зависимостей.

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

Уценка все в одном

Markdown All in One — очень полезное расширение для всего, что связано с уценкой. Он добавляет такие функции, как автоматический предварительный просмотр, ярлыки, автозаполнение синтаксиса и многое другое. Markdown обычно используется во многих технических областях, и это расширение делает работу с ним еще проще, повышая производительность и скорость.

С Markdown All in One вы можете использовать ярлыки для изменения текста и добавления таких элементов, как жирный шрифт, курсив и т. д. Он также имеет полезную автоматизацию для работы со списками и математикой. Вот некоторые распространенные команды:

  • Создайте оглавление
  • Удалить номера разделов
  • Переключить блок кода
  • Распечатать текущий документ в HTML

IntelliSense

IntelliSense — это то, что VS Code называет собственной функцией автозаполнения кода, но она также включает в себя несколько различных функций. Он также включает: информацию о параметрах, краткую информацию и списки участников. Выделенные предложения можно вставить с помощью Tab или Enter.

Когда предложения принимаются, Intellisense запоминает, какие неполные символы были введены. Таким образом, если вы снова наберете эти символы, сначала появится принятое предложение. Это эффективно позволяет вам настраивать рекомендации, сознательно принимая их. Например, если вы введете co, а затем примете автозаполнение: console, в следующий раз, когда вы наберете co, первым будет предложено console. Если вы наберете con и выберете const, этот выбор также будет запомнен.

IntelliSense поставляется с готовыми настройками для JavaScript, TypeScript, JSON, HTML, CSS, SCSS и Less. Но его можно легко установить практически для любого языка по вашему выбору с помощью расширения языкового пакета. Существуют языковые расширения, которые охватывают расширенные функции IntelliSense для:

  • питон
  • C/C++
  • C#
  • Джава
  • Go
  • Дартс
  • PHP
  • Рубин

Персонализация. Intellisense также можно настроить с помощью привязок клавиш!

Проблемы с доступностью VS Code

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

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

VS Code также предлагает поддержку нескольких различных программ чтения с экрана. Они протестировали и подтвердили использование NVDA и JAWS в Windows, VoiceOver в macOS и Orca в Linux. Когда VS Code обнаруживает средство чтения с экрана, по умолчанию используется оптимизированный режим чтения с экрана, который изменяет пользовательский интерфейс для редактора и встроенного терминала.

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

Есть даже несколько расширений, которые вы можете добавить в VS Code, которые помогут вам помнить о специальных возможностях во время написания кода. Первый называется Веб-подсказка, и хотя он делает больше, чем просто отмечает проблемы с доступностью, мы все могли бы время от времени использовать некоторые напоминания, связанные с доступностью. Он может анализировать HTML, CSS, JavaScript, TypeScript, JSX и многое другое во время написания кода. Проблемы, выделенные Webhint, отображаются на панели ошибок. Объединение Webhint с расширением Error Lens позволяет сделать проблемы доступности (наряду с регулярно помечаемыми ошибками) еще более заметными. Объектив ошибок берет проблемы, обычно отображаемые на панели ошибок, и отображает их в строке, где они возникают.

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

Шпаргалка по ярлыкам VS Code

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

Продолжить чтение о продуктивности на сайте Educational

Начать обсуждение

Какое ваше любимое расширение кода VS для использования? Была ли эта статья полезна? Дайте нам знать в комментариях ниже!