Полезные расширения VS Code

Обязательные и рекомендуемые расширения для веб-разработки

Зачем нужно

  • Расширить возможности редактора
  • Автоматизировать рутину (форматирование, линтинг)
  • Повысить продуктивность

Где используется

  • Ежедневная веб-разработка
  • Работа с Git, HTML, CSS, JavaScript

Предпосылки

Установка расширений

# Через GUI
# Ctrl+Shift+X → поиск → Install

# Через терминал
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint

# Список установленных
code --list-extensions

Обязательные расширения

ESLint

ID: dbaeumer.vscode-eslint

Линтинг JavaScript/TypeScript прямо в редакторе:

  • Подчёркивает ошибки и предупреждения
  • Автоисправление при сохранении
// settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Prettier — Code Formatter

ID: esbenp.prettier-vscode

Автоматическое форматирование кода:

  • Единый стиль для всей команды
  • Поддержка JS, TS, HTML, CSS, JSON, Markdown
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Live Server

ID: ritwickdey.liveserver

Локальный сервер с live reload:

  • Правый клик на HTML → "Open with Live Server"
  • Автообновление при сохранении файла
  • Горячая клавиша: Alt+L, Alt+O

GitLens

ID: eamodio.gitlens

Расширенная работа с Git:

  • Blame-аннотации прямо в коде (кто, когда, зачем)
  • История файла и строки
  • Визуальное сравнение коммитов
  • Graph — визуализация веток

Path Intellisense

ID: christian-kohler.path-intellisense

Автодополнение путей к файлам:

import App from './comp'  // → автоподсказка: ./components/App

Auto Rename Tag

ID: formulahendry.auto-rename-tag

Автоматическое переименование парных HTML/JSX тегов:

<!-- Меняете <div> → <section> -->
<!-- Закрывающий </div> автоматически станет </section> -->

Рекомендуемые расширения

Для HTML/CSS

Расширение ID Назначение
HTML CSS Support ecmel.vscode-html-css Автодополнение CSS-классов в HTML
CSS Peek pranaygp.vscode-css-peek Перейти к CSS по клику на класс
Color Highlight naumovs.color-highlight Подсветка цветов в коде
Image Preview kisstkondrat.vscode-gutter-preview Превью изображений в gutter

Для JavaScript

Расширение ID Назначение
JavaScript (ES6) Snippets xabikos.JavaScriptSnippets Сниппеты для JS
npm Intellisense christian-kohler.npm-intellisense Автодополнение npm-пакетов в import
Error Lens usernamehw.errorlens Ошибки прямо в строке кода
Console Ninja nicepkg.console-ninja console.log значения прямо в редакторе

Для Git

Расширение ID Назначение
Git Graph mhutchie.git-graph Визуальное дерево коммитов
Conventional Commits vivaxy.vscode-conventional-commits Помощник для conventional commits

Для продуктивности

Расширение ID Назначение
Todo Tree Gruntfuggly.todo-tree Показать все TODO в дереве
Bracket Pair Toggler встроенное Подсветка парных скобок
Better Comments aaron-bond.better-comments Цветные комментарии по типу
Project Manager alefragnani.project-manager Быстрое переключение проектов

Тема и оформление

Расширение ID Назначение
One Dark Pro zhuangtongfa.Material-theme Популярная тёмная тема
Material Icon Theme PKief.material-icon-theme Красивые иконки файлов
Indent Rainbow oderwat.indent-rainbow Цветные отступы

Russian Language Pack

ID: MS-CEINTL.vscode-language-pack-ru

Интерфейс VS Code на русском языке.

Файл рекомендаций для проекта

.vscode/extensions.json:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ritwickdey.liveserver",
    "eamodio.gitlens",
    "christian-kohler.path-intellisense",
    "formulahendry.auto-rename-tag",
    "usernamehw.errorlens"
  ],
  "unwantedRecommendations": 
}

Сниппеты

Встроенные (Emmet)

html:5    → полный HTML-шаблон
div.class → <div class="class"></div>
ul>li*3   → список из 3 элементов

Пользовательские сниппеты

File → Preferences → Configure User Snippets → JavaScript:

{
  "Console Log": {
    "prefix": "cl",
    "body": "console.log('$1:', $1);",
    "description": "Console log с именем переменной"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": "const $1 = ($2) => {\n\t$3\n};",
    "description": "Arrow function"
  }
}

Частые ошибки

  • Слишком много расширений — замедляет VS Code. Отключайте неиспользуемые
  • Конфликт форматтеров — Prettier и Beautify одновременно. Выберите один
  • Не настроить расширение — ESLint без конфига .eslintrc не работает
  • Не использовать workspace-рекомендации — каждый в команде ставит свой набор

Практика

  1. Установите 5 обязательных расширений из списка
  2. Настройте Prettier как default formatter с format on save
  3. Установите Live Server и откройте HTML-файл
  4. Создайте .vscode/extensions.json с рекомендациями
  5. Создайте 2 пользовательских сниппета
  6. Попробуйте GitLens: наведите на строку кода и посмотрите blame

Связанные темы

Ресурсы