Лучшие расширения VS Code для веб-разработчика

Коротко

Хороший набор расширений — небольшой: один инструмент на задачу. Для большинства веб-проектов это:

Ставьте только то, чем действительно пользуетесь. Каждое расширение — это код, работающий в вашем редакторе.

Линтинг и форматирование

ESLint находит проблемы, Prettier форматирует. Они не должны конфликтовать: в современной настройке ESLint отвечает за качество кода, Prettier — за оформление, а правила форматирования в ESLint отключаются конфигом проекта.

Настройки, чтобы все работало при сохранении:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Расширение ESLint использует пакет eslint и конфиг вашего проекта, поэтому ставьте их как dev-зависимости. С Prettier так же: .prettierrc в репозитории делает форматирование одинаковым у всех. EditorConfig добавляет базовые правила — отступы, переводы строк, — которые работают в любом редакторе.

Git

Встроенная панель Source Control покрывает коммиты, диффы и ветки. GitLens добавляет blame-аннотации к каждой строке, историю файла и строки, сравнение веток. Git Graph рисует граф коммитов. Если GitLens кажется тяжелым, отключите в его настройках ненужные функции — inline blame и code lens выключаются отдельно.

Docker и Dev Containers

Расширение Docker от Microsoft (новые версии называются Container Tools) показывает контейнеры, образы и тома, подсказывает синтаксис Dockerfile и compose-файлов, открывает логи или shell одним кликом. Dev Containers идет дальше: проект описывает окружение в .devcontainer/devcontainer.json, и VS Code открывает код внутри контейнера с нужной версией Node или Python. Новый участник команды получает рабочее окружение без ручной установки.

REST-клиенты

REST Client хранит запросы в обычных .http-файлах, которые можно коммитить рядом с кодом:

@baseUrl = http://localhost:3000

### List users
GET {{baseUrl}}/api/users
Accept: application/json

### Create user
POST {{baseUrl}}/api/users
Content-Type: application/json

{"name": "Aziz"}

Нажмите Send Request над запросом — ответ откроется рядом. Thunder Client дает визуальный интерфейс в духе Postman прямо в VS Code. Никогда не коммитьте настоящие токены: держите их в переменных окружения или в локальных файлах из .gitignore.

AI-ассистенты

GitHub Copilot предлагает автодополнение и чат, который видит открытые файлы. Альтернативы вроде Continue подключаются к разным моделям, включая запущенные локально. Прежде чем использовать ассистента на коммерческом коде, проверьте политику компании: какой код уходит провайдеру и может ли он использоваться для обучения. Относитесь к подсказкам как к коду младшего коллеги — проверяйте, особенно в вопросах безопасности.

Общий набор для команды

Положите рекомендации в .vscode/extensions.json в репозитории:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "EditorConfig.EditorConfig"
  ]
}

VS Code предложит их установить, когда кто-то откроет проект. Общие настройки — в .vscode/settings.json.

Как не замедлить редактор

• Измеряйте. Command Palette → Developer: Show Running Extensions показывает время активации каждого расширения.
• Ищите виновника. Help: Start Extension Bisect отключает расширения половинами, пока проблема не найдется.
• Отключайте для рабочей области. Линтер Python не нужен во фронтенд-проекте: Disable (Workspace).
• Используйте профили (Profiles) — отдельные наборы расширений и настроек для веба, Python или текстов.
• Избегайте дублей: два форматтера или два Git-интерфейса, делающих одно и то же.
• Исключите папки сборки из отслеживания и поиска:

{
  "files.watcherExclude": { "**/dist/**": true, "**/.next/**": true },
  "search.exclude": { "**/dist": true, "**/.next": true }
}

• Проверяйте издателя. Предпочитайте проверенных издателей и активно поддерживаемые расширения: у расширения тот же доступ к вашим файлам, что и у вас.