Плагин eslint-plugin-react

Роль плагина в экосистеме ESLint

eslint-plugin-react представляет собой специализированное расширение для ESLint, предназначенное для анализа кода React-приложений. Основная задача плагина заключается в выявлении ошибок, связанных с использованием JSX, компонентной модели React, а также устаревших или некорректных паттернов написания UI-логики.

Плагин дополняет базовый ESLint правилами, которые невозможно реализовать средствами стандартного JavaScript-анализа, поскольку они опираются на синтаксис JSX и семантику React-компонентов.

Ключевые области анализа:

  • корректность JSX-выражений;
  • использование пропсов и типов компонентов;
  • соответствие соглашениям React API;
  • обнаружение устаревших паттернов (legacy React);
  • базовая проверка доступности и структуры компонентов (частично).

Установка и подключение

Подключение плагина выполняется через пакетную систему Node.js:

npm install eslint-plugin-react --save-dev

или

yarn add eslint-plugin-react -D

После установки плагин активируется в конфигурации ESLint:

{
  "plugins": ["react"]
}

Для корректной работы JSX требуется также включение соответствующего парсинга:

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

При использовании современных инструментов сборки часто применяется парсер @babel/eslint-parser, обеспечивающий поддержку современных стандартов ECMAScript и JSX:

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    }
  }
}

Конфигурационные пресеты

Плагин предоставляет набор готовых конфигураций, упрощающих начальную настройку:

  • plugin:react/recommended — базовый набор правил для большинства проектов;
  • plugin:react/all — максимально строгий режим с включением всех правил.

Пример подключения рекомендованной конфигурации:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]
}

Дополнительно используется настройка версии React:

{
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Автоматическое определение версии позволяет корректно применять правила, зависящие от конкретного релиза React.

Основные категории правил

Плагин структурирован вокруг групп правил, каждая из которых решает определённый класс задач.

JSX-правила корректности

Эти правила обеспечивают правильное использование JSX-синтаксиса:

  • react/jsx-uses-react — контроль импорта React (актуальность снижена после нового JSX transform);
  • react/jsx-uses-vars — предотвращение ложных предупреждений об «неиспользуемых переменных» в JSX;
  • react/jsx-no-undef — выявление неопределённых компонентов в JSX;
  • react/jsx-pascal-case — проверка именования компонентов.

Пример ошибки:

const app = () => <div>Hello</div>;

При включённом react/jsx-pascal-case будет зафиксировано нарушение, так как компонент должен начинаться с заглавной буквы.

Проверка свойств компонентов (props)

Одним из ключевых направлений анализа является контроль корректности передачи свойств:

  • react/prop-types — проверка наличия PropTypes;
  • react/forbid-prop-types — запрет на использование слишком общих типов;
  • react/default-props-match-prop-types — синхронизация defaultProps и PropTypes.

Пример использования PropTypes:

import PropTypes from "prop-types";

function Button({ label }) {
  return <button>{label}</button>;
}

Button.propTypes = {
  label: PropTypes.string.isRequired
};

Правила для JSX-структуры

Группа правил, контролирующих структуру JSX-дерева:

  • react/jsx-key — обязательный ключ в списках;
  • react/jsx-no-comment-textnodes — запрет комментариев как текстовых узлов;
  • react/jsx-fragments — предпочтение фрагментов вместо лишних обёрток;
  • react/no-array-index-key — предупреждение о небезопасном использовании индекса массива как key.

Пример проблемного кода:

items.map((item, index) => (
  <div key={index}>{item.name}</div>
));

Такой подход может приводить к некорректному обновлению DOM при изменении порядка элементов.

Управление состоянием и жизненным циклом

Хотя eslint-plugin-react не является полноценным анализатором архитектуры состояния, он содержит ряд правил, связанных с компонентной логикой:

  • react/no-direct-mutation-state — запрет прямого изменения state;
  • react/no-did-mount-set-state — контроль вызовов setState в жизненных методах;
  • react/no-will-update-set-state — предотвращение потенциальных бесконечных циклов обновления.

Устаревшие и deprecated-паттерны

С переходом React на функциональные компоненты и хуки многие правила стали ориентированы на предотвращение legacy-подходов:

  • react/no-string-refs — запрет строковых refs;
  • react/no-find-dom-node — отказ от устаревшего API;
  • react/no-deprecated — выявление устаревших методов жизненного цикла.

Совместимость с React 17+ и новым JSX transform

С введением нового JSX transform необходимость в явном импорте React в каждом файле отпала. Это влияет на поведение некоторых правил:

  • react/react-in-jsx-scope — становится неактуальным;
  • react/jsx-uses-react — в современных конфигурациях часто отключается.

Типичная конфигурация для React 17+:

{
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-uses-react": "off"
  }
}

Взаимодействие с другими плагинами

eslint-plugin-react часто используется совместно с другими расширениями экосистемы ESLint:

  • eslint-plugin-react-hooks — строгая проверка правил хуков;
  • eslint-plugin-jsx-a11y — контроль доступности интерфейса;
  • eslint-plugin-import — проверка корректности импортов;
  • eslint-config-airbnb — комплексная конфигурация, включающая React-правила.

Разделение ответственности важно: eslint-plugin-react не покрывает проверку хуков или accessibility на глубоком уровне.

Пример полной конфигурации

{
  "parser": "@babel/eslint-parser",
  "plugins": ["react"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/jsx-key": "error",
    "react/prop-types": "warn",
    "react/no-array-index-key": "warn",
    "react/react-in-jsx-scope": "off"
  }
}

Механика работы внутри ESLint

Плагин регистрирует набор правил, каждое из которых представляет собой функцию анализа AST (Abstract Syntax Tree). При обработке JSX-кода происходит:

  1. парсинг исходного файла в AST;
  2. обход дерева узлов;
  3. применение visitor-функций правил;
  4. генерация lint-ошибок или предупреждений.

JSX-узлы имеют специфичную структуру (JSXElement, JSXOpeningElement, JSXAttribute), что требует отдельной логики обхода.

Типичные ошибки интеграции

На практике встречаются повторяющиеся проблемы конфигурации:

  • отсутствие включённого JSX в parserOptions;
  • конфликт версий React и правил плагина;
  • использование старых конфигураций (ESLint < 7);
  • смешивание CommonJS и ESM без корректного парсера;
  • дублирование правил между конфигурациями (Airbnb + ручная настройка).

Производительность и масштабирование

На больших кодовых базах влияние eslint-plugin-react на производительность зависит от:

  • количества JSX-файлов;
  • глубины AST-анализа;
  • включённых правил (особенно no-array-index-key, prop-types);
  • параллелизации ESLint runner’а.

Оптимизация достигается за счёт:

  • отключения неиспользуемых правил;
  • разделения конфигураций для production и development;
  • кеширования результатов ESLint (--cache флаг).

Эволюция подходов к линтингу React-кода

С развитием React наблюдается смещение фокуса:

  • от классовых компонентов к функциональным;
  • от PropTypes к TypeScript;
  • от runtime-проверок к compile-time анализу;
  • от строгих правил JSX к минимально инвазивному линтингу.

В современных проектах eslint-plugin-react часто используется как базовый слой, поверх которого строится TypeScript-ориентированная проверка через @typescript-eslint.

Оглавление