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

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

Зачем нужны ESLint и Prettier?

ESLint — это линтер (статический анализатор кода) для JavaScript и TypeScript. Он ищет потенциальные ошибки, проблемные паттерны, нарушение соглашений о стиле (например, использование необъявленных переменных или неправильных отступов). Он думает о качестве и правильности кода.

Prettier — это "opinionated" форматтер кода. Он не ищет ошибки, а безжалостно переписывает ваш код согласно своим, строго заданным правилам оформления (отступы, кавычки, переносы строк, точки с запятой). Он думает о единообразии и читаемости.

Пошаговая настройка в VS Code

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

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

1. ESLint от Microsoft (dbaeumer.vscode-eslint)
2. Prettier от Prettier (esbenp.prettier-vscode)

После установки перезагрузите редактор.

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

Откройте терминал в корне вашего проекта и выполните:

npm init -y
npm install --save-dev eslint prettier eslint-config-prettier

Это создаст `package.json` и установит необходимые пакеты. `eslint-config-prettier` отключает правила форматирования в ESLint, которые могут конфликтовать с Prettier.

Шаг 3: Настройка ESLint

Создайте конфигурационный файл ESLint:

npx eslint --init

Ответьте на вопросы в интерактивном мастере (рекомендуется выбрать: проверку синтаксиса, проблем и стиля; модули ES; фреймворк, если используете; TypeScript, если нужно; браузер/Node.js; популярный стиль, например, Airbnb или Standard; конфиг в JSON).

Затем создайте файл `.eslintrc.json` (или откройте созданный) и убедитесь, что в `extends` добавлен `"prettier"` в конец списка:

{
  "extends": ["airbnb-base", "prettier"]
}

Шаг 4: Настройка Prettier

Создайте файл `.prettierrc` в корне проекта. Это ваш свод правил форматирования. Пример конфигурации:

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

Шаг 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", "typescript", "javascriptreact", "typescriptreact"],
  "prettier.requireConfig": true
}

Эти настройки заставляют VS Code автоматически исправлять ошибки ESLint и применять форматирование Prettier при каждом сохранении файла.

Продвинутая настройка и интеграция

Для проектов на TypeScript установите `@typescript-eslint/parser` и `@typescript-eslint/eslint-plugin` и настройте `.eslintrc` соответственно. Для React добавьте плагин `eslint-plugin-react`. Можно создать общие конфигурации для всей команды, чтобы гарантировать идентичный стиль кода у всех разработчиков.

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

ESLint и Prettier конфликтуют. Что делать?

Убедитесь, что в `extends` вашего `.eslintrc` конфиг `"prettier"` указан последним. Это отключает все правила форматирования ESLint в пользу Prettier.

Форматирование не работает при сохранении?

1. Проверьте, что файл находится в проекте с `package.json` и конфигами.
2. Убедитесь, что в правом нижнем углу VS Code для типа файла выбран форматтер "Prettier".
3. Перезагрузите окно VS Code.

Как игнорировать определенные файлы или строки?

Для ESLint: используйте комментарии `// eslint-disable-next-line` или создайте файл `.eslintignore`.
Для Prettier: используйте комментарий `// prettier-ignore` над кодом или файл `.prettierignore`.

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

Да. Привычка писать чистый код формируется с самого начала. Это инвестиция в ваше будущее и качество любого проекта.