8 полезных плагинов VS Code для вёрстки
- 8 декабря 2020
Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.
Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.
Сделали подборку популярных и полезных плагинов VS Code.
Emmet
Помогает ускорить вёрстку. С помощью !
и Tab
можно создать базовую структуру кода за секунду либо быстро создать вложенные теги.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор, устанавливать не нужно.
Material Theme
Приятная тема для редактора с разными акцентными цветами.

Live Server
Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server», и в браузере отобразится страница, которая автоматически будет перезагружаться.

Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с помощью «Stop Live Server»
Как использовать Live Server в работе
CSS Peek
Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.

Prettier — code formatter
Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.
Auto rename tag
Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.

Path autocomplete
Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.
HTML CSS Support
Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link
.
Ещё о VS Code
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Подборка микроанимаций для фронтенда с CodePen в 2023
Какие бывают и зачем нужны.
- 12 апреля 2023

Какой формат выбрать — WebP, PNG или JPG
Узнаем особенности форматов и в каких случаях их лучше использовать
- 10 марта 2023

Обзор редакторов кода
Visual Studio Code, Atom, Sublime Text и WebStorm под микроскопом.
- 6 марта 2023





Топ-20 лучших плагинов для Figma в 2023
Новые функции в вашей Figma — бесплатно.
- 24 ноября 2022

10 лучших тем для VS Code в ноябре 2022
Почти вся классика: от темы Visual Studio 2017 до Monokai.
- 18 ноября 2022

Лучшие расширения VS Code в ноябре 2022
Полезные инструменты для упрощения работы.
- 9 ноября 2022