Настройка ESLint для React приложения: полное руководство

ESLint — это статический анализатор кода, который помогает находить проблемы в JavaScript/TypeScript коде до их проявления в рантайме. В React-приложениях ESLint особенно важен: он проверяет соблюдение правил хуков, наличие зависимостей в useEffect, правильное использование ключей в списках и многое другое. В этом гайде ты узнаешь, как настроить ESLint для React приложения с нуля, подключить популярные конфиги и плагины, интегрировать инструмент с редактором кода и CI/CD.

Содержание:

• Установка ESLint и базовая настройка

  • Инициализация и базовый конфиг

• Настройка ESLint для React

  • Установка React-плагинов

  • Конфигурация правил React

  • React Hooks и другие важные правила

• Популярные конфиги и расширения

  • eslint-config-airbnb

  • eslint-config-prettier

• Типичные ошибки и их решение

• Интеграция с IDE и CI/CD

  • VS Code и WebStorm

  • Husky и lint-staged

  • Проверка в CI/CD

• Заключение

Установка ESLint и базовая настройка

Предполагается, что у тебя уже есть React-проект, созданный, например, с помощью Vite, Create React App или Next.js. Если нет — создай тестовый проект для экспериментов.

Инициализация и базовый конфиг

Установи ESLint как dev-зависимость:

npm install --save-dev eslint

Затем инициализируй конфигурацию:

npx eslint --init

Мастер задаст несколько вопросов:

• How would you like to use ESLint? — выбери «To check syntax, find problems, and enforce code style».

• What type of modules does your project use? — JavaScript modules (import/export).

• Which framework does your project use? — React.

• Does your project use TypeScript? — выбери в зависимости от проекта.

• Where does your code run? — Browser (и возможно Node, если используешь SSR).

• What format do you want your config file to be in? — JSON или YAML — на твой вкус.

• Would you like to install the necessary dependencies? — Yes.

После этого появится файл .eslintrc.json (или .eslintrc.js) с базовой конфигурацией. Пример для JavaScript-проекта:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {}
}

Настройка ESLint для React

Базовая конфигурация уже включает плагин eslint-plugin-react и его рекомендованные правила. Но для полноценной работы с современным React (хуки, JSX, TypeScript) потребуются дополнительные пакеты.

Установка React-плагинов

Установи следующие пакеты:

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

• eslint-plugin-react — основные правила React (prop-types, display-name, JSX-синтаксис).

• eslint-plugin-react-hooks — правила для хуков (нельзя вызывать хуки в циклах/условиях, проверка зависимостей).

• eslint-plugin-jsx-a11y — проверка доступности (accessibility) JSX-разметки.

Если используешь TypeScript, добавь также:

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

Конфигурация правил React

Обнови .eslintrc.json:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react", "react-hooks", "jsx-a11y"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "warn"
  }
}

Обрати внимание: react/react-in-jsx-scope отключён, потому что начиная с React 17 JSX-трансформация не требует обязательного импорта React. react/prop-types можно оставить как предупреждение, если ты не используешь TypeScript.

React Hooks и другие важные правила

Плагин react-hooks/recommended включает два ключевых правила:

• rules-of-hooks — запрещает вызывать хуки в циклах, условных операторах и вложенных функциях.

• exhaustive-deps — проверяет, что все зависимости указаны в массиве useEffect, useCallback, useMemo. Это критически важно для предотвращения багов с устаревшими замыканиями.

Ты можешь настроить их строгость:

"rules": {
  "react-hooks/exhaustive-deps": ["error", { "additionalHooks": "(useMyCustomHook)" }]
}

Популярные конфиги и расширения

Вместо того чтобы прописывать правила вручную, можно использовать готовые расширяемые конфиги.

eslint-config-airbnb

Самый популярный набор правил от Airbnb. Установка:

npx install-peerdeps --dev eslint-config-airbnb

Затем добавь "airbnb" в extends. Для React-проекта с хуками и a11y:

"extends": ["airbnb", "airbnb/hooks", "plugin:jsx-a11y/recommended"]

eslint-config-prettier

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

Установка:

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

Добавь "prettier" в конец массива extends:

"extends": [
  "airbnb",
  "airbnb/hooks",
  "plugin:jsx-a11y/recommended",
  "prettier"
]

Важно: prettier должен быть последним, чтобы переопределить все предыдущие правила форматирования.

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

Типичные ошибки и их решение

Интеграция с IDE и CI/CD

VS Code и WebStorm

VS Code: установи официальное расширение ESLint (dbaeumer.vscode-eslint). После настройки проекта ошибки и предупреждения будут подсвечиваться прямо в редакторе. Чтобы автоматически исправлять проблемы при сохранении, добавь в .vscode/settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

WebStorm: ESLint интегрирован из коробки. Зайди в Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint, включи Automatic ESLint configuration и отметь Run eslint --fix on save.

Husky и lint-staged

Чтобы ESLint автоматически проверял код перед коммитом, используй Husky и lint-staged.

Установка:

npx mrm@2 lint-staged

Эта команда установит Husky и lint-staged, а также добавит скрипт в package.json примерно такого вида:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": "eslint --fix"
}

Теперь при попытке сделать коммит ESLint проверит и автоматически исправит все файлы с указанными расширениями. Если после автоисправления останутся ошибки — коммит отклонится.

Проверка в CI/CD

Добавь в package.json скрипт:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
}

В конфигурации CI (GitHub Actions, GitLab CI, Jenkins) добавь шаг:

- run: npm ci
- run: npm run lint

Если ESLint найдёт ошибки, процесс сборки завершится с ошибкой, и pull request не будет принят.

Заключение

Ты настроил ESLint для React приложения: от базовой инициализации до интеграции с редактором, pre-commit хуками и CI/CD. Правильная конфигурация линтера спасает от множества багов, обеспечивает единый стиль кода в команде и ускоряет ревью. Начни с рекомендованных правил (plugin:react/recommended и plugin:react-hooks/recommended), затем при необходимости добавь Airbnb или другой расширенный конфиг. Не забывай про конфликт с Prettier — используй eslint-config-prettier. Регулярно обновляй зависимости плагинов, чтобы получать новые правила и улучшения.