Лучшие плагины для Visual Studio Code

В этой статье рассмотрим лучшие плагины для верстки и веб-разработки в:

• Visual Studio Code.

Подборка особенно полезна:

• верстальщикам;
• frontend-разработчикам;
• PHP-разработчикам;
• тем, кто работает с HTML, CSS, JS и SASS.

Settings Sync

Settings Sync — плагин для синхронизации настроек VS Code между компьютерами.

Синхронизируются:

• настройки редактора;
• горячие клавиши;
• плагины;
• открытые файлы;
• настройки расширений.

Очень удобно, если вы работаете:

• на домашнем ПК;
• ноутбуке;
• рабочем компьютере.

Auto Close Tag

Auto Close Tag — автоматически закрывает HTML-теги.

Например:

<div>

после ввода автоматически появится:

</div>

Auto Rename Tag

Auto Rename Tag — автоматически переименовывает парные HTML-теги.

Bookmarks

Bookmarks — добавляет закладки в коде для быстрого перехода между участками проекта.

Bracket Pair Colorizer

Bracket Pair Colorizer — подсвечивает парные скобки разными цветами.

Особенно полезно:

• в JavaScript;
• PHP;
• React;
• Vue.js.

change-case

change-case — меняет регистр и стиль именования переменных:

• camelCase;
• snake_case;
• kebab-case;
• PascalCase.

Color Info

Color Info — показывает подробную информацию о цветах CSS.

Import Cost

Import Cost — показывает размер импортируемых npm-модулей.

Полезно для оптимизации frontend-проектов.

Indenticator

Indenticator — визуализация отступов в коде.

Особенно удобно:

• в Python;
• SASS;
• YAML.

IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML — автодополнение CSS-классов в HTML.

Один из самых полезных плагинов для верстки.

Live Server

Live Server — автоматическая перезагрузка страницы при изменении файлов.

Path Intellisense

Path Intellisense — автодополнение путей к файлам.

Project Manager

Project Manager — менеджер проектов для VS Code.

REST Client

REST Client — встроенный REST API клиент прямо внутри редактора.

Spell Right

Spell Right — проверка орфографии, включая русский язык.

TODO Highlight

TODO Highlight — подсвечивает важные комментарии:

// TODO: Переделать этот участок

vscode-icons

vscode-icons — красивые иконки файлов и папок.

WakaTime

WakaTime — система аналитики времени, потраченного на разработку.

Показывает:

• время работы над проектом;
• статистику по языкам;
• активность по файлам.

Итог

Visual Studio Code становится намного удобнее после установки правильных расширений.

Особенно полезны:

• Live Server;
• Auto Rename Tag;
• Path Intellisense;
• CSS class completion;
• WakaTime.

Если вы используете интересные плагины для VS Code — напишите о них в комментариях.