VS Code — редактор кода

Visual Studio Code — самый популярный редактор для JavaScript-разработки. Бесплатный, кросс-платформенный, с огромной экосистемой расширений. Разберёмся, как настроить его под профессиональную работу.

Установка

Скачайте VS Code с официального сайта code.visualstudio.com. Установщики доступны для Windows, macOS и Linux.

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

После установки откройте панель расширений (Ctrl+Shift+X) и установите:

ESLint

Расширение dbaeumer.vscode-eslint интегрирует ESLint прямо в редактор — ошибки линтера отображаются подчёркиванием прямо в коде.

// settings.json — автоисправление при сохранении
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Prettier

Расширение esbenp.prettier-vscode автоматически форматирует код при сохранении файла.

// settings.json — форматирование при сохранении
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

GitLens

Расширение eamodio.gitlens добавляет мощные возможности для работы с Git прямо в редакторе: аннотации строк, история изменений, сравнение веток.

Другие полезные расширения

Настройка редактора

Создайте файл .vscode/settings.json в корне проекта для командных настроек:

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.rulers": [80, 120],
  "editor.minimap.enabled": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true
}

Полезные горячие клавиши