16 полезных плагинов JavaScript в VS Code

Большую часть времени разработчик творит код в редакторе. Редактор кода Visual Studio Code сам по себе помогает работать быстрее. Например, он подчёркивает ошибки красным цветом и выдаёт подсказки. Но процесс можно сделать ещё приятнее: достаточно установить нужное расширение.

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

ESLint

Это линтер, то есть программа, которая проверяет код на наличие синтаксических ошибок. ESLint анализирует ваш код, выделяет ошибки и предлагает пути их исправления. Конечно, в VS Code уже есть встроенная система IntelliSense, которая выдаёт подсказки. Но ESLint как нельзя лучше подойдёт, например, если вам нужны разные настройки — для JSX, для чистого JS, для среды Node.js. Кроме того, линтер можно встроить в систему проверки кода и перед отправкой материалов в репозиторий ещё раз убедиться, что всё в порядке.

Bracket Pair Colorizer

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

Better Align

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

EditorConfig

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

Copy/Paste detector

Помогает найти дублирование кода в проекте.

Prettify JSON

Расширение позволяет форматировать файлы в формате JSON.

JavaScript (ES6) code snippets

Это сниппет, то есть он позволяет ввести только короткое сочетание клавиш, а вместо него появится целая строка кода. Вручную почти ничего не надо делать, что экономит время.

Например, команда enf→ вызовет export const log = (parameter) => { console.log (parameter); };

npm Intellisense

Пригодится при разработке под Node.js. Начните писать название модуля — по первым символам плагин подскажет варианты.

Git History

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

Project Manager

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

Document this

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

Todo+

Обычно участки кода, которые планируется позже отрефакторить, помечают комментарием TODO. Могут быть и другие комментарии, например, FIXME, NOTE. Тodo+ сканирует файл и выводит все комментарии в отдельную панель.

REST Client

Позволяет отправлять HTTP-запросы и сразу же просматривать на них ответы. Например, для отправки GET-запроса достаточно ключевого слова GET и URL — рядом появится кнопка. При нажатии откроется отдельная вкладка с результатом выполнения запроса.

VSCode-random

Подойдёт, если вам нужен набор сгенерированных данных. Расширение включает несколько генераторов, которые выдают названия стран, URL-адреса, цвета, имена людей, названия улиц, валидные email, случайные числа и ещё много другого. Всё проще, чем готовить такие данные самостоятельно.

Import Cost

Пакеты в NPM (менеджере пакетов) могут быть очень объёмными. С помощью этого расширения можно увидеть размер пакета после подключения прямо в редакторе и выбрать оптимальный. А ещё вы можете задать порог — и пакеты тяжелее этого порога подсветятся красным.

Handlebars/Handlebars Preview, pug/htmlPugConverter

Помогают в работе с популярными шаблонизаторами handlebars и Pug.

Handlebars подсвечивает синтаксис.

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

htmlPugConverter упрощает конвертацию HTML в синтаксис Pug и обратно.

pug — сниппет для шаблонизатора Puge/Jade.

Попробуйте эти расширения при работе с JavaScript сами. Вот увидите — жизнь станет намного проще! А если не понравится, любой плагин можно удалить — как и установить — в один клик.

Ещё о полезных плагинах:

• 8 расширений VS Code для продуктивной работы
• 9 полезных плагинов VS Code для вёрстки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.