Лучшие расширения для VS Code

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

Самые необходимые расширения для VS Code

1. Live Server
2. Sass
3. Live Sass Complier
4. Higlight Matching Tag
5. Color Highlight
6. Apache Conf
7. All Autocomplete
8. Russian Language Pack
9. Небольшой бонус

Live Server

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

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

1. нажатием Go Live в статус баре
2. правым щелчком мыши в окне с кодом --> 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. Откроем установленное расширение и заполним необходимые поля
Actual Server Address: адрес и порт на котором расположен сервер
Live Server Address: адрес, на котором работает расширение Live Server
5. Нажимаем кнопку Go Live в статус баре
6. Заходим на адрес локального сервера (в моём случае Open Server и адрес является названием проекта), т.е. заходим по адресу, который записали в Actual Server Address

Sass

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

Live Sass Complier

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

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

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

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

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"
},

Color Highlight

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

Apache Conf

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

All Autocomplete

Название говорит само за себя - автозаполнение всего. Расширение запоминает используемые слова и не только. Маст хэв.

Russian Language Pack

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

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

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

"editor.tabSize": 2

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

"editor.insertSpaces": true

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

"editor.detectIndentation": false

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

"editor.renderWhitespace": "boundary"