Идеальный код: Полное руководство по настройке ESLint и Prettier в VS Code

Чистый, единообразный и безошибочный код — не роскошь, а необходимость для любого разработчика. Настройка связки ESLint и Prettier в VS Code превращает рутинную проверку стиля и поиск ошибок в автоматизированный, почти невидимый процесс. Это ваш путь к профессиональному качеству кода, экономии времени и душевного спокойствия при работе в команде.

Зачем это нужно? Два инструмента — одна цель

ESLint и Prettier часто путают, но они решают разные, дополняющие друг друга задачи.

• ESLint — это линтер (статический анализатор кода). Он ищет ошибки, потенциальные баги, неиспользуемые переменные и нарушения правил (например, использование `==` вместо `===`). Он заботится о качестве и логике кода.
• Prettier — это форматтер кода. Он не волнуется о смысле, его цель — единообразие стиля. Он автоматически переписывает ваш код, приводя отступы, кавычки, переносы строк, длину строк к единому стандарту.

Вместе они создают бесшовный рабочий процесс: Prettier приводит код в красивый вид, а ESLint следит, чтобы в этой красоте не было скрытых проблем.

Пошаговая настройка с нуля

Шаг 1: Установка расширений в VS Code

1. Откройте панель расширений (Ctrl+Shift+X).
2. Установите официальные расширения: ESLint (от Microsoft) и Prettier — Code formatter (от Prettier).
3. Перезагрузите редактор, если потребуется.

Шаг 2: Инициализация проекта и установка пакетов

Откройте терминал в корне вашего проекта (например, JavaScript/React/Node.js).

1. Инициализируйте npm (если еще не сделано): npm init -y
2. Установите пакеты как dev-зависимости: npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier отключает все правила форматирования в ESLint, которые могут конфликтовать с Prettier. eslint-plugin-prettier позволяет запускать Prettier как правило ESLint.

Шаг 3: Конфигурационные файлы

Создайте в корне проекта три файла:

1. .eslintrc.json (или .js, .yaml) — конфиг ESLint.
2. .prettierrc — конфиг Prettier (можно в формате .json, .js или .yaml).
3. .eslintignore и .prettierignore — чтобы игнорировать ненужные файлы (например, node_modules, build).

Шаг 4: Наполнение конфигураций

Пример .eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended" // Важно! Интегрирует Prettier
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "rules": {
    // Ваши кастомные правила, например:
    "no-console": "warn"
  }
}

Пример .prettierrc (минимальный):

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Шаг 5: Настройка VS Code для автоматического форматирования

Откройте настройки VS Code (JSON: Ctrl+Shift+P → "Preferences: Open Settings (JSON)"). Добавьте:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript"]
}

Продвинутые сценарии и типичные проблемы

Работа с TypeScript, React, Vue

Для этих технологий нужно установить дополнительные пакеты и плагины (например, @typescript-eslint/eslint-plugin) и расширить соответствующую конфигурацию в .eslintrc.json.

Конфликты и приоритеты

Если форматирование работает не так, как ожидалось:

• Убедитесь, что в проекте нет других конфигов форматтера (например, в .vscode/settings.json).
• Проверьте, что в расширении Prettier не включена глобальная настройка, перекрывающая локальный .prettierrc.
• Запустите команду npx eslint --fix . и npx prettier --write . в терминале, чтобы проверить работу инструментов вручную.

FAQ: Часто задаваемые вопросы

ESLint и Prettier исправляют одно и то же?

Нет. Prettier — только форматирование (стиль). ESLint — поиск ошибок и нарушений правил, но может включать и некоторые стилевые правила (которые мы отключаем с помощью eslint-config-prettier).

Нужно ли настраивать это для каждого проекта?

Да, конфигурационные файлы (.eslintrc, .prettierrc) должны быть в корне каждого проекта. Это гарантирует, что у всех членов команды и на CI/CD будут одинаковые настройки.

Можно ли использовать один глобальный конфиг для всех проектов?

Технически — да, но это не рекомендуется. Разные проекты могут использовать разные технологии (React, Node.js, Vue) и иметь разные соглашения по коду. Локальная конфигурация — стандарт в индустрии.

Что делать, если код не форматируется при сохранении?

1. Проверьте, что расширения ESLint и Prettier активны для текущего типа файла.
2. Убедитесь, что в настройках VS Code (settings.json) правильно заданы editor.formatOnSave и editor.defaultFormatter.
3. Перезагрузите окно VS Code (Ctrl+Shift+P → "Developer: Reload Window").

Как добавить правила ESLint из популярного стиля (например, Airbnb)?

Установите соответствующий конфиг-пакет (например, eslint-config-airbnb) и добавьте его в массив extends в .eslintrc.json до строки "plugin:prettier/recommended".