Подготовили адаптированный перевод материала JavaScript (Medium) о полезных расширениях VSCode.
Рассмотрим 13 расширений Visual Studio Code (VSCode) ― кроссплатформенного редактора скриптов от Microsoft, ― которые помогают отлаживать код, делать его более читабельным и красивым, а также добавляют полезные функции в рабочее пространство разработчика.
Auto Close Tag
Одно из самых важных расширений, которое автоматически добавляет закрывающий тег. Не требует никаких команд для активации. По умолчанию Auto Close Tag доступно в VSCode.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/auto-close-tag.gif)
Auto Rename tag
Если нужно поправить тег <button> на <a>, изменяем первый — открывающий — тег, а второй поменяется автоматически.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/auto-rename-tag.gif)
Beautify
Функция расширения — превратить некрасивый файл без пробелов и символов табуляции, где каждый тег идёт сразу после предыдущего, в более читабельный и красивый.
Чтобы использовать это расширение, сначала нужно нажать F1. Затем в строке написать «Beautify» и выбрать его из списка — код автоматически исправится.
Bracket pair colorizer
Это расширение придаёт каждой паре групп свой цвет — можно быстро и легко найти нужную пару.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/bracket-pair-color_1.png)
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/bracket-pair-color_2.png)
ESLint
ESLint статически анализирует код для быстрого поиска проблем, которые может автоматически скорректировать.
Когда расширение определяет проблему, она отмечается красным подчёркиванием. И проблему можно легко исправить самостоятельно.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/eslint.gif)
JavaScript (ES6) code snippets
Одно из классных расширений для JavaScript. Когда пишете что-то в своём коде и забываете, как вызывается функция, расширение автоматически предложит её записать — нужно будет просто нажать Enter.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/es6.jpg)
- Научим программировать на JavaScript и PHP — сможете создавать сайты и веб-приложения
- Масштабная программа и много практики — выполните
9 проектов для портфолио - Лучших выпускников ждёт стажировка или трудоустройство в Affinage
Kite
Kite делает почти то же самое, что и предыдущее расширение JavaScript (ES6) code snippets. Нейронные сети, которые используются в этом расширении, помогают быстрее писать код.
Live Server
При написании или коррекции HTML-, CSS- или JavaScript-файла нажатие команды «Go Live» в нижней части окна VSCode позволит автоматически добавить изменения на веб-страницу без перезагрузки и других действий.
Material Icon Theme
Расширение добавляет иконки к файлам и папкам в верхней части окна VSCode, что позволяет легко ориентироваться в них.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/image2-3.png)
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/image6-1.png)
One dark pro
Ещё одно расширение, которое сделает рабочее пространство VSCode более удобным и красивым. Оно меняет стандартную тему на новую красивую.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/image5-1.jpg)
Open In Browser
Это простое расширение, которое позволяет открывать файлы прямо в браузере.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/image10-1.jpg)
Path Intellisense
Если нужно прописать путь в теге «href» или «src», расширение предоставит путь к уже существующему файлу.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/image4.gif)
Settings Sync
Последнее расширение — самое важное. Оно синхронизирует настройки в VSCode с учётной записью Google, Github и другими, и при удалении VSCode ничего страшного не произойдёт.
С недавних пор расширение встроено в VSCode.
![13 расширений VSCode, которые пригодятся любому веб-разработчику](https://blog-prod-bucket.website.yandexcloud.net/uploads/2021/04/image7-2.jpg)
Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.