@eslint-react/eslint-plugin

ESLint React

A set of composable linting rules for libraries and frameworks that use React as a UI runtime.

Features

• Modern: First-class support for TypeScript, React 19, and more.
• Flexible: Increased flexibility with more granular severity control.
• Performant: Built with performance in mind, optimized for large codebases.
• Comprehensive: Handles complex scenarios and identifies problems that other tools might miss.

Public Packages

Modular

• eslint-plugin-react-x - Core rules (renderer-agnostic, compatible with x-platform).
• eslint-plugin-react-dom - DOM specific rules for React DOM.
• eslint-plugin-react-web-api - Rules for interacting with Web APIs.
• eslint-plugin-react-hooks-extra - Extra React Hooks rules.
• eslint-plugin-react-naming-convention - Naming convention rules.

All-In-One

• @eslint-react/eslint-plugin - Main plugin combining all rules and presets from the above packages.

Installation

[!NOTE]
ESLint React requires the following minimum versions:

• node@18.18.0
• eslint@8.57.0
• typescript@4.9.5

Install

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

Setup

// eslint.config.js

// @ts-check
import eslintJs from "@eslint/js";
import eslintReact from "@eslint-react/eslint-plugin";
import tseslint from "typescript-eslint";

export default tseslint.config({
  files: ["**/*.ts", "**/*.tsx"],
  extends: [
    eslintJs.configs.recommended,
    tseslint.configs.recommended,
    eslintReact.configs["recommended-typescript"],
  ],
  languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      projectService: true,
      tsconfigRootDir: import.meta.dirname,
    },
  },
  rules: {
    // Put rules you want to override here
    "@eslint-react/no-class-component": "error",
  },
});

Full Installation Guide ↗

Presets

Bare Bones

• Core (core)
  Enable rules for "react".
• DOM (dom)
  Enable rules for "react-dom".
• Web API (web-api)
  Enable rules for interacting with Web APIs.

General Purpose

• Recommended (recommended)
  Enforce rules that are recommended by ESLint React for general purpose React + React DOM projects.
  This preset includes the core, dom, and web-api presets.

TypeScript Specialized

• Recommended TypeScript (recommended-typescript)
  Same as the recommended preset but disables rules that can be enforced by TypeScript.

• Recommended Type-Checked (recommended-type-checked)
  Same as the recommended-typescript preset but enables additional rules that require type information.

Full Presets List ↗

Rules

Rules Overview ↗

FAQ

Frequently Asked Questions ↗

Roadmap

• Milestone 2.0 ↗

Contributing

Contributions are welcome!

Please follow our contributing guidelines.

License

This project is licensed under the MIT License - see the LICENSE file for details.