Большую часть времени разработчик творит код в редакторе. Редактор кода 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 сами. Вот увидите — жизнь станет намного проще! А если не понравится, любой плагин можно удалить — как и установить — в один клик.