21 февр. 2023 г. Время чтения: Около 3 мин. Веб-разработка

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

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

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

Git Graph

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

Thunder client

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

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

Auto rename tag

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

TODO Highlight

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

IntelliSense for CSS class names in HTML

Это расширения VSCode для 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.