![](https://habrastorage.org/getpro/habr/upload_files/3e0/538/4ec/3e05384ec719e5f09425d93dfd10b321.jpg)
Одним из наиболее ценных аспектов Visual Studio Code является его расширяемость с помощью плагинов, которые значительно облегчают и улучшают рабочий процесс. В этой статье мы собрали инструменты - от простых до продвинутых - которые сделают вашу разработку более продуктивной и приятной, позволяя сосредоточиться на творческой части процесса.
Color Info — Предоставляет краткую информацию о цветах CSS. По умолчанию расширение работает с любым документом css, sass, scss. Распознает все основные цветовые форматы, включая именованные цвета. Есть возможность настроить инструмент под собственные задачи.
![](https://habrastorage.org/getpro/habr/upload_files/0ff/c51/863/0ffc518639d19530215835bd5584b8b1.png)
VSCode Icons — Поможет быстрее сориентироваться среди множества файлов. Добавляет иконки папкам и файлам. Нет нужной иконки? Не беда — можно добавить свою.
![](https://habrastorage.org/getpro/habr/upload_files/be9/00d/888/be900d888b06bf8388c1d3f3e4125e25.gif)
Git History — Покажет историю изменений коммита, файла или отдельной строки. Поддерживает горячие клавиши, сравнения файлов и поиск по истории.
![](https://habrastorage.org/getpro/habr/upload_files/5fd/8d8/78a/5fd8d878ac77c51e0f863f4204a8b3fd.gif)
Prettier — Автоматически форматирует ваш код приводит его к единому стилю, расставляет табы, пробел и отступы. Поддерживает множетво языков, фреймворков и интеграций.
Peacock — Изменение цвета рабочей области. Идеально подходит, если у вас есть несколько окон или используете VS Live Share. Имеет обширную документацию и множество вариантов настройки.
![Peacock Peacock](https://habrastorage.org/getpro/habr/upload_files/538/136/1d2/5381361d2c1c119880ba74b130a56ac2.png)
VS Faker — Генерирует фейковые данные (адреса, имена, числая и другую информацию), используя библиотеку Faker. Отлично подойдёт для быстрого тестирования.
Live Server — Предоставляет локальный сервер с функцией живой перезагрузки для своего проекта. Прост в использовании, имеет горячие клавиши и множество вариантов настройки.
![Live Server Live Server](https://habrastorage.org/getpro/habr/upload_files/08c/0b2/5ca/08c0b25ca5d0c30b1d72bfc74bbcca83.gif)
GitLens — Расширяет возможности Git в VS Code. Позволяет взглянуть на кого, почему и когда была изменена строка или блок кода, а затем перейти к истории, чтобы получить аналитические сведения о развитии кода.
Bookmarks — Поможет ориентироваться в коде, легко и быстро перемещаясь между важными местами с помощью закладок. Имеет обширный и удобный функционал.
ESLint — Проверяет код и выделяет ошибки для обеспечения согласованности и правильности JavaScript-кода в соответствии со стандартами.
Quokka.js — Обеспечивает мгновенную отладку и вывод результатов JavaScript-выражений в реальном времени.
![Quokka.js Quokka.js](https://habrastorage.org/getpro/habr/upload_files/ee6/c96/16d/ee6c9616da4989416c3705ee923e71f9.gif)
Path Intellisense — Предоставляет автозаполнение путей файлов и папок. Теперь не нужно лазить по папкам в поиске нужного файла.
npm Intellisense — Предоставляет подсказки при работе с npm-пакетами.
???? Ежедневные тесты, статьи и многое другое для frontend-разработки на канале: Frontend Formula