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