Как настроить и использовать Prettier и ESLint для автоматизации форматирования и проверки кода в JavaScript-проектах

Современная разработка на JavaScript невозможна без соблюдения стандартов кодирования и автоматизации рутины. Инструменты Prettier (форматирование) и ESLint (статический анализ) позволяют поддерживать чистоту кода и избегать типовых ошибок. В этой статье расскажем, как быстро и правильно интегрировать их в проект, какие проблемы могут возникнуть и как их решить. Разобраться не только полезно, но и экономит ваше время в будущем.

Что дают Prettier и ESLint: краткий обзор

Давайте сначала проясним назначение инструментов:

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

Частая проблема: базовые правила форматирования частично дублируются, и, без правильной настройки, инструменты могут конфликтовать между собой. Ниже — как этого избежать и добиться synergy.

Интеграция и базовая настройка в вашем проекте

Рассмотрим практическую настройку на примере проекта с npm (подходит для любых JS/TS проектов, включая React).

Шаг 1. Установка зависимостей

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

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

Шаг 2. Конфигурируем ESLint

Создайте файл .eslintrc.json (или .eslintrc.js):

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn"
  }
}

• Ключевой блок: "plugin:prettier/recommended" — это настройка отключит конфликтующие правила и включит Prettier как правило ESLint.
• Вы можете расширять или уточнять правила индивидуально под свой проект.

Шаг 3. Настройка Prettier

Создайте .prettierrc или prettier.config.js с желаемыми параметрами:

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

Prettier не ругается на "плохой синтаксис", только доводит вид кода до общего вида.

Шаг 4. Скрипты и автоматизация

• Добавьте npm-скрипты в package.json для удобства:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write ."
  }
}

• npm run lint — проверяет и выводит ошибки.
• npm run format — автоматически форматирует все файлы по Prettier.

Настраиваем автоматическое исправление и предотвращаем ошибки

Одна из главных задач автоматизации — сделать так, чтобы исправление кода не отнимало у вас время и было "по клику". Вот несколько практических советов:

Автоматическое форматирование при сохранении

Используйте поддерживаемые редактором возможностей — например, в VS Code:

• Установите расширения ESLint и Prettier.
• В settings.json добавьте:

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

Теперь при каждом сохранении файл отформатируется и проверится на ошибки.

Pre-commit проверки для командной работы

Чтобы не пускать "грязный" код в репозиторий, подключите хуки, например, через lint-staged и husky:

1. Установите пакеты командой: npm install --save-dev husky lint-staged
2. В package.json добавьте:

{
  "lint-staged": {
    "*.[jt]s?(x)": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

• Запускайте npx husky install и настройте pre-commit (см. документацию husky).

Теперь при каждом коммите будут запускаться автоматические проверки и форматирование только изменённых файлов.

Возможные проблемы и особенности интеграции Prettier + ESLint

Несколько полезных советов:

• ESLint должен быть "старше" Prettier в сценариях командной проверки: сначала исправляйте синтаксис и потенциальные ошибки, затем форматируйте.
• При возникновении конфликтов между правилами статики и автокоррекции — расширяйте eslint-config-prettier настройками или убирайте дублирующее правило.
• Следите за версиями пакетов, периодически обновляйте (npx npm-check-updates).
• В больших командах опубликуйте свой шаблон .eslintrc и .prettierrc в wiki или отдельном пакете — для единообразия.

Заключение

Автоматизация проверки и форматирования кода — это не просто "модно", а насущная потребность. Интеграция Prettier и ESLint позволяет избавиться от лишних обсуждений по поводу стиля, сразу видеть ошибки и ускоряет ревью. Реализовать всё это можно за 10–20 минут по четким шагам выше. Попробуйте — и вы уже не захотите возвращаться к ручной рутине.

Не забывайте: автоматизация освобождает время для реальной работы — разработки новых фич, поиска инженериных решений и изучения новых технологий.