Всем привет! На связи BFDevel, и сегодня мы рассмотрим 10 расширений VS Code, которые реально ускоряют вёрстку и отладку кода.
VS Code "из коробки" - это просто хороший редактор кода. Чтобы сделать из него полноценную IDE для веб-разработки, нужно правильно подобрать инструменты. Я собрал список плагинов, которыми пользуюсь сам.
1. Auto Rename Tag
Один из самых важных плагинов для HTML-вёрстки.
Что делает: При изменении открывающего тега (например, <div> на <section>) он автоматически меняет и закрывающий тег </div> на </section>.
Зачем: Исключает "несовпадающие теги", которые ломают вёрстку.
2. Live Server
Классика, без которой локальная разработка невозможна.
Что делает: Запускает локальный dev-сервер с поддержкой Live Reload. Как только вы сохраняете HTML или CSS файл, браузер автоматически обновляет страницу.
Зачем: Не нужно каждый раз жать F5. Изменения видны мгновенно. Работает с любыми статическими файлами.
3. Path Intellisense
Что делает: Автодополнение путей к файлам при импорте (картинок, скриптов, стилей).
Зачем: Вы начинаете вводить src="./images/... и плагин сам подсказывает названия файлов в папке. Экономит время и исключает опечатки в путях (Image not found - частая проблема новичков).
4. Format HTML in PHP
Довольно полезное расширение, особенно при работе с CMS на PHP (напр.
1С-Битрикс).
Что делает: Форматирует HTML-код, который находится внутри PHP-файлов.
Зачем: Стандартные форматтеры (включая Prettier) часто ломают вёрстку в смешанных файлах - переносят PHP-теги, сбивают отступы в HTML или вообще отказываются работать. Это расширение корректно обрабатывает именно HTML-разметку внутри <?php ... ?>, расставляя отступы и переносы строк.
5. Auto Import
Что делает: Автоматически добавляет import для компонентов, классов и функций, которые вы используете в коде, но забыли импортировать.
Зачем: В проектах на React/Vue/JS это экономит сотни кликов. Вы просто пишете название компонента, и плагин сам прописывает путь к файлу.
6. Image Preview
Что делает: Показывает миниатюру изображения прямо в редакторе кода (на полях, рядом с путём к файлу) и в подсказке при наведении.
Зачем: Не нужно сворачивать редактор и открывать папку с картинками, чтобы понять, какой файл подключать. Особенно полезно при работе с большими галереями.
7. CSS Peek
Что делает: Позволяет посмотреть определение CSS-класса или ID прямо из HTML-файла. При наведении на класс всплывает код стиля, а по клику (Ctrl+Click) курсор перемещается в CSS-файл.
Зачем: Навигация между HTML и CSS становится мгновенной.
8. Error Lens
Что делает: Выводит сообщения об ошибках (от ESLint, TypeScript или компилятора) прямо в строке кода, где возникла проблема.
Зачем: Обычно ошибки видны только при наведении или в консоли внизу. Error Lens подсвечивает проблему красным цветом сразу.
9. GitLens - Git supercharged
Что делает: Показывает историю коммитов, авторов строк и изменения кода прямо в редакторе (инлайн-аннотации).
Зачем: Вы видите, кто и когда менял конкретную строку, не открывая интерфейс Git.
10. HTML CSS Support
Что делает: Автодополнение имён классов в HTML-атрибуте class="", беря данные из ваших CSS-файлов.
Зачем: Вы начинаете писать <div class="btn- и плагин предлагает .btn-primary, .btn-secondary и т.д. из вашей таблицы стилей. Огромная экономия времени при вёрстке по БЭМ.
Как не перегрузить редактор
Многие ставят 50 плагинов, и VS Code начинает тормозить.
- Проверяйте влияние на память: Откройте Help -> Open Process Explorer. Если расширение занимает много ресурсов и вы им редко пользуетесь - отключайте.
- Workspace Recommended: Если работаете в команде, создайте файл .vscode/extensions.json и пропишите туда эти расширения. При открытии проекта VS Code сам предложит коллеге установить нужный софт.
Заключение
Какими плагинами пользуетесь вы? Может, есть полезные плагины, о которых мало кто знает? Пишите в комментарии - самые интересные добавлю в статью.
Подписывайтесь на канал, ставьте ❤️, если материал был полезен, и делитесь с коллегами.
Моя предыдущая статья: