VS Code: расширения для начинающих

Расширения VS Code — плагины, добавляющие поддержку языков, инструментов, тем и дополнительную функциональность в редактор.

Зачем нужно

VS Code из коробки — минималистичный редактор. Расширения превращают его в полноценную IDE: ESLint показывает ошибки на лету, Prettier форматирует при сохранении, GitLens показывает историю прямо в коде. Правильный набор расширений критически важен для продуктивной разработки.

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

  • Подсветка синтаксиса для новых языков (YAML, Docker, GraphQL)
  • Линтинг и форматирование кода в реальном времени
  • Git-интеграция с визуализацией истории
  • Language Server Protocol (LSP) — автодополнение, переходы, рефакторинг

Обязательные расширения для JS/TS разработчика

Установка через Ctrl+Shift+X или команду:
  code --install-extension <id>

Форматирование и линтинг

esbenp.prettier-vscode
  — форматирование кода по правилам Prettier
  Настройка: "editor.formatOnSave": true

dbaeumer.vscode-eslint
  — показывает ESLint-ошибки в реальном времени, автофикс
  Настройка: "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }

TypeScript и JavaScript

ms-vscode.vscode-typescript-next
  — последняя версия TypeScript Language Server
  (обычно TypeScript уже встроен в VS Code, но эта версия свежее)

christian-kohler.path-intellisense
  — автодополнение путей в import-ах и require

Git

eamodio.gitlens
  — Git Blame прямо в строке кода, визуализация веток и истории
  — «Кто написал эту строку и когда»

mhutchie.git-graph
  — визуальный граф веток Git

Удобство

aaron-bond.better-comments
  — цветные комментарии: TODO, !, ?, * — разные цвета

streetsidesoftware.code-spell-checker
  — проверка орфографии в коде и комментариях

ms-vsliveshare.vsliveshare
  — совместное редактирование кода в реальном времени (pair programming)

PKief.material-icon-theme
  — иконки файлов по типу (tsx, ts, md, json, docker...)

zhuangtongfa.material-theme (One Dark Pro)
  — популярная тёмная тема

Специализированные

bradlc.vscode-tailwindcss   — автодополнение Tailwind CSS классов
ms-vscode.live-server       — live reload для HTML/CSS
prisma.prisma               — поддержка Prisma Schema
ms-azuretools.vscode-docker — работа с Docker/Compose
graphql.vscode-graphql      — поддержка GraphQL
redhat.vscode-yaml          — валидация YAML файлов

Установка набора через extensions.json()

// .vscode/extensions.json() — рекомендации для команды
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens",
    "PKief.material-icon-theme",
    "aaron-bond.better-comments",
    "streetsidesoftware.code-spell-checker"
  ]
}

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

  • Слишком много расширений — замедляют запуск VS Code
  • Конфликт форматтеров: Prettier и встроенный TypeScript formatter — нужно "defaultFormatter": "esbenp.prettier-vscode"
  • Не перезапускают VS Code после установки расширения — оно не активируется
  • Устанавливают расширения не из Marketplace (.vsix из интернета) — потенциальная угроза

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

Ресурсы