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

Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2021 году.

  1. Live Server
  2. Sass
  3. Live Sass Complier
  4. Higlight Matching Tag
  5. Color Highlight
  6. Bracket Pair Colorizer
  7. Auto Rename Tag
  8. Auto Close Tag
  9. Import Cost
  10. Material Theme
  11. Apache Conf
  12. Russian Language Pack
  13. Code Spell Checker
  14. Небольшой бонус

1. Live Server

Автоматическая перезагрузка статических и динамических страниц.

Color Highlight

Включение Live Server для .html или .htm файлов:

  1. нажатием Go Live в статус баре
  2. Запуск Live Server VS Code

  3. правым щелчком мыши в окне с кодом » Open with Live Server

Включение Live Server, если нет .html или .htm файлов:

  1. нажатием горячих клавиш alt + l alt + o - для запуска сервера и alt + l alt + c - для его остановки
  2. нажатием F1 или ctrl + shift + p » Live Server: Open With Live Server

Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server

  1. Нужно установить дополнение для браузера Chrome или Firefox.
  2. Должен быть установлен локальный сервер. Я использую Open Server.
  3. Помещаем свой проект на локальный сервер и запускаем его.
  4. Откроем установленное расширение и заполним необходимые поля.
  5. Live Server Web Extension Actual Server Address: адрес и порт на котором расположен сервер.
    Live Server Address: адрес, на котором работает расширение Live Server.
  6. Нажимаем кнопку Go Live в статус баре.
  7. Запуск Live Server
  8. Заходим на адрес локального сервера (в моём случае Open Server и адрес является названием проекта), т.е. заходим по адресу, который записали в Actual Server Address.

2. Sass

Поддержка синтаксиса Sass: отступы, автозаполнение и прочее

Поддержка Sass VS Code

3. Live Sass Complier

Компилирует SASS / SCSS файлы в CSS в режиме реального времени

Live Sass Complier

Для включения Live Sass Complier нужно нажать Watch Sass в статус баре

Запуск Live Sass Complier VS Code

Что включает в себя Live Sass Complier:

  1. выбор папки экспорта компилируемого файла
  2. выбор стиля CSS (расширенный, компактный, сжатый, вложенный)
  3. выбор имени расширения (.css или .min.css)
  4. совместимость с расширением Live Server
  5. настройка автоматической простановки вендорных префиксов
  6. и прочее

4. Higlight Matching Tag

Выделение тегов - открывающего и закрывающего

Подсветку выделения тегов можно кастомизировать под себя. Моя настройка:

"highlight-matching-tag.leftStyle": {
    "borderWidth": "2px 2px 2px 2px",
    "borderStyle": "solid",
    "borderColor": "yellow",
    "borderRadius": "5px"
},
"highlight-matching-tag.rightStyle": {
    "borderWidth": "2px 2px 2px 2px",
    "borderStyle": "solid",
    "borderColor": "yellow",
    "borderRadius": "5px"
},

Higlight Matching Tag VS Code

5. Color Highlight

Выделение web-цветов в редакторе соответствующим цветом

Color Highlight VS Code

6. Bracket Pair Colorizer

Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.

Bracket Pair Colorizer

7. Auto Rename Tag

При изменении одного парного тега, второй будет изменён автоматически.

По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:

"auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript"
],
Auto Rename Tag

8. Auto Close Tag

Автоматическое закрытие тегов

По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json

"auto-close-tag.activationOnLanguage": [
    "php",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
]
Auto Rename Tag

9. Import Cost

Это расширение будет отображать встроенный в редакторе размер импортируемого пакета.

Auto Rename Tag

10. Material Theme

Одна из самых популярных тем для VS Code. Так же можно установить шрифт, поддерживающий лигатуры (преобразование последовательности символов в единый элемент)

Тогда настройки для settings.json будут такими

"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code",
"editor.fontWeight": "100",

11. Apache Conf

Поддержка синтаксиса Apache. Удобно для редактирования файлов с расширениями .htaccess. Также поддерживает типы файлов: .conf, .htgroups, .htpasswd

Apache Conf

12. Russian Language Pack

Поддержка русского языка

Поддержка русского языка VS Code

13. Code Spell Checker

Проверка орфографии русского и английского языков в VS Code.

Code Spell Checker - проверка орфографии в VS Code
  1. установите Code Spell Checker;
  2. установите Russian - Code Spell Checker;
  3. добавьте в настройки строку "cSpell.language": "en,ru",

14. Автоматическая замена табов пробелами в VS Code

Сначала зададим количество пробелов в одном табе:

"editor.tabSize": 2

Теперь настроим автоматическую замену табов пробелами:

"editor.insertSpaces": true

Чтобы табы всегда заменялись пробелами:

"editor.detectIndentation": false

Отображать символы пробелов:

"editor.renderWhitespace": "boundary"
Изучаем английский
EnglishRussian
Color HighlightПодсветка цвета
Live Sass ComplierSass-компилятор в режиме онлайн
Higlight Matching TagПодсветка тегов
Админ admin