@eslint-react/eslint-plugin

ESLint React

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

Table of Contents

• Table of Contents
• Features
• Public Packages
  • Unified ESLint Plugin
  • Modular ESLint Plugins
• 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

Unified ESLint Plugin

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

Modular ESLint Plugins

• 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.

[!NOTE]
Don't know which one to use? See our FAQ for guidance.

Installation

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

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

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.

• strict
  Same as the recommended preset but enables additional strict rules.

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.

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

• strict-type-checked
  Same as the strict-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

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

This project is and will continue to maintain that 90% of the code is written by humans.

Contributing

Contributions are welcome!

Please follow our contributing guidelines.

License

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