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

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

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

ESLint

Проверяет код на синтаксические ошибки и предлагает исправления.

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

Better Align

Выравнивает переменные, свойства объекта и другие элементы кода по операторам :, =, +=,-=,*=,/= или по стрелке =>. При этом длина переменных не важна.

EditorConfig

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

Prettify JSON

Расширение форматирует файлы в формате JSON.

JavaScript (ES6) code snippets

Этот сниппет ускоряет разработку: вы вводите короткое сочетание клавиш, а вместо них появляется целая строка кода. Например, команда enf вызовет export const log = (parameter) => { console.log (parameter); }.

npm Intellisense

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

Git History

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

Project Manager

Когда вы работаете сразу над несколькими проектами, приходится переключаться между ними — это не всегда удобно. Project Manager решает эту проблему. С ним вы можете создавать, открывать, закрывать и быстро переключаться между различными проектами прямо из интерфейса Visual Studio Code.

Document this

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

Todo+

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

REST Client

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

VSCode-random

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

Import Cost

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

Code Runner

Благодаря плагину вы сможете запустить код или сниппет на многих языках. Например, C, C++, Java, JavaScript, PHP, Python.

Snippets

Сниппеты — сокращения для часто используемых фрагментов кода. Их нужно сначала заучить, но после этого работа сильно ускоряется. Например, вам больше не нужно каждый раз писать const packageName = require('packageName'); — достаточно написать req и нажать клавишу tab. И таких примеров много.

Tabnine AI

Нейросеть поможет ускорить работу благодаря автодополнению кода. Аналог GitHub Copilot и других подобных сервисов.

Handlebars/Handlebars Preview, pug/htmlPugConverter

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

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

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

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

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

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

Материалы по теме

• Обзор редакторов кода
• 10 библиотек для CSS и JS анимации
• Топ-20 плагинов для Figma
• Как искать и выбирать npm-пакеты
• HTML-шаблонизаторы

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