15 расширений для VSCode, которые упростят разработку

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

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

Git Graph

Расширение помогает просматривать ветки репозитория на GitHub и искать нужные апдейты в истории изменений.

Thunder client

Альтернатива Postman, которая позволяет тестировать конечные точки API кодовой базы внутри VSCode. Поддерживает безскриптовые тесты.

vscode-icons

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

Auto rename tag

Автоматически переименовывает и закрывает парные теги в HTML/CSS. Эта функция доступна в Visual Studio IDE по умолчанию, в VSCode ее нужно устанавливать вручную.

TODO Highlight

Плагин подсвечивает разными цветами комментарии, содержащие текст TODO или FIXME.

IntelliSense for CSS class names in HTML

Расширение автоматически дополняет название CSS-класса для HTML-атрибута class. Данные плагин берет из определений в рабочей области или внешних источников, на которые ссылается элемент link.

CSS Peek

Расширение для быстрого перехода к css, привязанному к определенному блоку в коде классом или id. Для этого достаточно кликнуть правой кнопкой мышки на селектор и выбрать функцию «Перейти к определению».

Prettier

Пакет для автоматического форматирования кода, который поддерживает JavaScript, TypeScript, CSS и множество других языков программирования.

Live server

Расширение позволяет автоматически перезагружать страницу после внесения изменений в js, css, html-код. Это упрощает отладку отдельных HTML-страниц со скриптами.

bracket pair colorizer 2

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

Jest runner

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

Turbo console log

Быстрый и содержательный console log выбранной переменной. Инструмент упрощает отладку, автоматизируя процесс записи журнальных сообщений.

Reactjs code snippets

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

eCSStractor

Плагин позволяет быстро скопировать классы CSS из разметки HTML c помощью горячих клавиш.

Code Spell Checker

Плагин для базовой проверки орфографии и синтаксиса, который работает как с кодом, так и с документацией.