Лучшие плагины для VS Code
Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2021 году.
- Live Server
- Sass
- Live Sass Complier
- Higlight Matching Tag
- Color Highlight
- Bracket Pair Colorizer
- Auto Rename Tag
- Auto Close Tag
- Import Cost
- Material Theme
- Apache Conf
- Russian Language Pack
- Code Spell Checker
- Небольшой бонус
1. Live Server
Автоматическая перезагрузка статических и динамических страниц.

Включение Live Server для .html или .htm файлов:
- нажатием Go Live в статус баре
- правым щелчком мыши в окне с кодом » Open with Live Server
Включение Live Server, если нет .html или .htm файлов:
- нажатием горячих клавиш alt + l alt + o - для запуска сервера и alt + l alt + c - для его остановки
- нажатием F1 или ctrl + shift + p » Live Server: Open With Live Server
Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server
- Нужно установить дополнение для браузера Chrome или Firefox.
- Должен быть установлен локальный сервер. Я использую Open Server.
- Помещаем свой проект на локальный сервер и запускаем его.
- Откроем установленное расширение и заполним необходимые поля.
- Нажимаем кнопку Go Live в статус баре.
- Заходим на адрес локального сервера (в моём случае Open Server и адрес является названием проекта), т.е. заходим по адресу, который записали в Actual Server Address.

Live Server Address: адрес, на котором работает расширение Live Server.

2. Sass
Поддержка синтаксиса Sass: отступы, автозаполнение и прочее
3. Live Sass Complier
Компилирует SASS / SCSS файлы в CSS в режиме реального времени

Для включения Live Sass Complier нужно нажать Watch Sass в статус баре
Что включает в себя Live Sass Complier:
- выбор папки экспорта компилируемого файла
- выбор стиля CSS (расширенный, компактный, сжатый, вложенный)
- выбор имени расширения (.css или .min.css)
- совместимость с расширением Live Server
- настройка автоматической простановки вендорных префиксов
- и прочее
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"
},
5. Color Highlight
Выделение web-цветов в редакторе соответствующим цветом
6. Bracket Pair Colorizer
Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.
7. Auto Rename Tag
При изменении одного парного тега, второй будет изменён автоматически.
По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:
"auto-rename-tag.activationOnLanguage": [
"html",
"xml",
"php",
"javascript"
],

8. Auto Close Tag
Автоматическое закрытие тегов
По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json
"auto-close-tag.activationOnLanguage": [
"php",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"plaintext",
"markdown",
"vue",
"liquid",
]

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

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

12. Russian Language Pack
Поддержка русского языка
13. Code Spell Checker
Проверка орфографии русского и английского языков в VS Code.

- установите Code Spell Checker;
- установите Russian - Code Spell Checker;
- добавьте в настройки строку "cSpell.language": "en,ru",
14. Автоматическая замена табов пробелами в VS Code
Сначала зададим количество пробелов в одном табе:
"editor.tabSize": 2
Теперь настроим автоматическую замену табов пробелами:
"editor.insertSpaces": true
Чтобы табы всегда заменялись пробелами:
"editor.detectIndentation": false
Отображать символы пробелов:
"editor.renderWhitespace": "boundary"
English | Russian |
---|---|
Color Highlight | Подсветка цвета |
Live Sass Complier | Sass-компилятор в режиме онлайн |
Higlight Matching Tag | Подсветка тегов |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.