ESLint + Prettier -- совместная работа

ESLint находит ошибки и проблемы в коде, Prettier форматирует его — вместе они обеспечивают единый стиль и качество кода в команде без ручных споров о форматировании.

Зачем нужно

ESLint ловит реальные баги: неиспользуемые переменные, вызов undefined, неправильное сравнение. Prettier устраняет все споры о форматировании (табы vs пробелы, кавычки, точки с запятой) — он просто переформатирует код в одном стиле. Вместе они автоматизируют code review по вопросам стиля и качества.

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

  • Любой командный JavaScript/TypeScript проект
  • Pre-commit хуки (husky + lint-staged): запрет коммита с ошибками
  • CI/CD: автоматическая проверка кода в pull request
  • VS Code: исправление ошибок при сохранении файла

Основной контент

Установка

npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier  # отключает конфликтующие правила ESLint
npm install --save-dev eslint-plugin-prettier  # опционально: Prettier как правило ESLint

Конфигурация ESLint (.eslintrc.json)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error"
  }
}

Ключевое: "prettier" в extends отключает ESLint-правила, конфликтующие с Prettier.

Конфигурация Prettier (.prettierrc)

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

Скрипты в package.json

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "format": "prettier --write src/",
    "check": "prettier --check src/"
  }
}

Pre-commit хуки (husky + lint-staged)

npm install --save-dev husky lint-staged
npx husky init

.husky/pre-commit:

npx lint-staged

package.json:

{
  "lint-staged": {
    "*.{js,ts}": ["eslint --fix", "prettier --write"],
    "*.{json,md,css}": "prettier --write"
  }
}

Настройка VS Code

.vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

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

  • Конфликт правил ESLint и Prettier — ESLint пытается форматировать код по-своему, Prettier — по-своему; решение: eslint-config-prettier отключает форматировочные правила ESLint
  • Разные настройки у разных разработчиков — конфиги должны быть в репозитории, не в личных настройках IDE
  • ESLint не видит файлы — проверь .eslintignore и шаблон в скрипте: eslint src/**/*.js vs eslint src/
  • Prettier переформатирует то, что не нужно — добавь .prettierignore: node_modules/, dist/, *.min.js

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

Ресурсы