Visual Studio Code или VS Code полезный инструмент веб-мастера. Одна из особенностей программы - ее кроссплатформенность, что позволяет использовать ее на разных ОС. Те, кому приходится работать на разных компьютерах оценят это преимущество. Также немаловажный факт - она бесплатна для использования.
Здесь мы рассмотрим наиболее полезные плагины для веб-верстки и некоторые настройки программы, облегчающие ее использование.
CSS Peek
Плагин позволяет быстро просматривать CSS-правила, которые применяются к HTML-элементам. Кликаем правой кнопкой по с
eCSStractor for VSCode
Плагин позволяет выбрать классы из html-файла. Выделяем блок, в контекстном меню eCSStractor и потом в css-файле вставляем.
Gist
Вставляет короткие фрагменты кода сохраненные на гитхабе
HTML to CSS autocompletion
Плагин добавляет возможность автозавершения классов в css из html
IntelliSense for CSS class names in HTML
Плагин добавляет возможность автозавершения классов из CSS в HTML. Плагин с обратным действием к HTML to CSS autocompletion
Live Server
Плагин автоматически перезагружает страницу после изменений в JavaScript-коде, CSS и HTML-разметке.
Для запуска нажать на строчку кода правой кнопкой мыши и выбрать "Open with Live Server"
Отключается с помощью "Stop Live Server".
HTML Preview
Плагин позволяет просмотреть страницу в окне VSCode, при это превью меняется в режиме реального времени сразу после сохранения индексного html-файла.
Prettier
Форматер кода. Комбинация Ctrl+Shift+P приведет код к единообразию - проставит отступы, расставит скобки и т.п.
Colorize
Показывает цвета в CSS-файлах
Path autocomplete
Подсказывает варианты путей к файлу.
HTML CSS Support
Плагин автоматически дополняет название ID или HTML-атрибута.
HTMLHint
Плагин для статического анализа HTML кода
Code Time
Отслеживайте прямо в редакторе время написания кода, добавляет данные из Outlook или Google-календаря