ESLint React

4-7x faster composable ESLint rules for React and friends.

Table of Contents

• Features
• Public Packages
  • Modular
  • Unified
• Installation
  • Install
  • Setup
• Presets
  • Bare Bones
  • General Purpose
  • TypeScript Specialized
  • Other
• Rules
• Benchmark
• FAQ
• Roadmap
• Disclaimer
• Contributing
• License

Features

• Modern: First-class support for TypeScript, React 19, and more.
• Flexible: Fully customizable rule severity levels, allowing you to enforce or relax rules as needed.
• Performant: Built with performance in mind, optimized for large codebases, 4-7x faster than other ESLint plugins.
• Context-aware Linting: Rules that understand the context of your code and project configuration to provide more accurate linting.

Public Packages

Modular

• eslint-plugin-react-x - X 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.

Unified

• @eslint-react/eslint-plugin - A unified plugin that combines all individual plugins into one.

Installation

Note

ESLint React requires the following minimum versions:

• Node.js: 20.19.0
• ESLint: 9.36.0
• TypeScript: 5.9.2

Install

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

Setup

// eslint.config.js

import eslintReact from "@eslint-react/eslint-plugin";
import eslintJs from "@eslint/js";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";

export default defineConfig([
  {
    files: ["**/*.ts", "**/*.tsx"],

    // Extend recommended rule sets from:
    // 1. ESLint JS's recommended rules
    // 2. TypeScript ESLint recommended rules
    // 3. ESLint React's recommended-typescript rules
    extends: [
      eslintJs.configs.recommended,
      tseslint.configs.recommended,
      eslintReact.configs["recommended-typescript"],
    ],

    // Configure language/parsing options
    languageOptions: {
      // Use TypeScript ESLint parser for TypeScript files
      parser: tseslint.parser,
      parserOptions: {
        // Enable project service for better TypeScript integration
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },

    // Custom rule overrides (modify rule levels or disable rules)
    rules: {
      "@eslint-react/no-missing-key": "warn",
    },
  },
]);

Full Installation Guide ↗

Presets

Bare Bones

• x
  Enable rules for "react".
• dom
  Enable rules for "react-dom".
• web-api
  Enable rules for interacting with Web APIs.

General Purpose

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

TypeScript Specialized

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

• recommended-type-checked
  Same as the recommended-typescript preset but enables additional rules that require type information.

Other

• disable-dom
  Disable rules in the dom preset.
• disable-web-api
  Disable rules in the web-api preset.
• disable-type-checked
  Disable rules that require type information.
• disable-conflict-eslint-plugin-react
  Disable rules in eslint-plugin-react that conflict with rules in our plugins.
• off
  Disable all rules in this plugin except for debug rules.

Full Presets List ↗

Rules

Rules Overview ↗

Benchmark

Benchmark Results ↗

FAQ

Frequently Asked Questions ↗

Roadmap

• Milestone 3.0 ↗

Disclaimer

ESLint React is not affiliated with Meta Corporation or facebook/react project or React team, nor is it endorsed or sponsored by them.

Contributing

Contributions are welcome!

Please follow our contributing guidelines.

License

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