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

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

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

Прежде чем погружаться в настройку, важно понять роль каждого инструмента. ESLint — это линтер. Он анализирует ваш код на предмет потенциальных ошибок, нарушений стиля и «плохих практик». Он следит за качеством и безопасностью кода. Prettier — это форматтер кода. Его задача — автоматически приводить код к единому, заранее заданному стилю (отступы, кавычки, переносы строк, точки с запятой). Вместе они создают идеальный симбиоз: Prettier делает код красивым, а ESLint — умным и корректным.

Ключевое отличие: ESLint может «ругаться» на логические ошибки, например, на неиспользуемые переменные или неправильное использование операторов. Prettier же работает только с форматированием и не анализирует логику.

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

Откройте панель расширений (Ctrl+Shift+X) и установите два официальных расширения:

ESLint от Microsoft (dbaeumer.vscode-eslint)
Prettier - Code formatter от Prettier (esbenp.prettier-vscode)

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

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

Перейдите в терминале в корень вашего проекта и выполните команды для установки необходимых npm-пакетов. Рекомендуется устанавливать их как devDependencies.

Базовый набор для JavaScript/TypeScript проекта:

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

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

Шаг 3: Настройка конфигурационных файлов

Создайте в корне проекта три файла: .eslintrc.js (или .json), .prettierrc и .eslintignore.

Пример .eslintrc.js:

module.exports = {
  env: {
    node: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // Ваши кастомные правила ESLint
    'no-console': 'warn',
  },
};

Пример .prettierrc (минимальная настройка):

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

Содержимое .eslintignore (аналогично .gitignore):

node_modules/
build/
dist/
*.min.js

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

Это самый важный шаг для комфортной работы. Откройте настройки VS Code (JSON) — файл settings.json.

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

Магия в действии: С такими настройками при каждом сохранении файла (Ctrl+S) произойдет две вещи: 1) Prettier автоматически отформатирует код, 2) ESLint автоматически исправит все ошибки, которые может исправить. Остальные ошибки будут подсвечены в редакторе.

Шаг 5: Работа с TypeScript и React

Для TypeScript-проектов дополнительно установите:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

И обновите .eslintrc.js, указав парсер и добавив плагин в расширения. Для React добавьте соответствующую среду и плагины (например, eslint-plugin-react).

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

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

Убедитесь, что у вас установлен и корректно подключен eslint-config-prettier в массиве extends. Он должен быть указан последним, чтобы отключить конфликтующие правила.

Как заставить линтер работать в отдельных файлах/папках?

Используйте файлы .eslintignore и .prettierignore для исключения. Для переопределения правил можно создать дополнительный конфиг .eslintrc во вложенной папке.

Настройки не применяются при сохранении. В чем проблема?

1) Проверьте, что конфигурационные файлы находятся в корне проекта. 2) Убедитесь, что в настройках VS Code (settings.json) не переопределены глобальные параметры для форматера. 3) Перезагрузите окно VS Code (Ctrl+Shift+P -> "Reload Window").

Можно ли использовать эту настройку в команде?

Да, это лучшая практика! Закоммитьте файлы .eslintrc.js, .prettierrc, .eslintignore и .editorconfig (опционально) в репозиторий. Это гарантирует единый стиль кода у всех участников команды.

Потратив час на первоначальную настройку, вы сэкономите сотни часов в будущем на спорах о стиле кода, ручном форматировании и отладке глупых синтаксических ошибок. Ваш редактор станет вашим самым внимательным и педантичным напарником.