eslint-react

Composable ESLint rules for React and friends.

Table of Contents

• Table of Contents
• Features
• Public Packages
  • Modular ESLint Plugins
  • Unified ESLint Plugin
• Installation
  • Install
  • Setup
• Presets
  • Bare Bones
  • General Purpose
  • TypeScript Specialized
  • Other
• Rules
• FAQ
• Migration
• Changelog
• Disclaimer
• Sponsors
• 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, code editor responsiveness, and CI pipelines.
• Context-aware linting: Rules that understand the context of your code and project configuration to provide more accurate linting.

Public Packages

Modular ESLint Plugins

• eslint-plugin-react-x - X rules (renderer-agnostic, compatible with x-platform).
• eslint-plugin-react-jsx - React Flavored JSX rules.
• eslint-plugin-react-rsc - Rules for React Server Components.
• eslint-plugin-react-dom - DOM-specific rules for React DOM.
• eslint-plugin-react-web-api - Rules for interacting with Web APIs.
• eslint-plugin-react-naming-convention - Naming convention rules.

Unified ESLint Plugin

• @eslint-react/eslint-plugin - A unified plugin that combines all individual plugins into one. Get complete, out-of-the-box rule coverage with instant feedback.

[!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: 10.0.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.
• jsx
  Enable rules for React Flavored JSX.
• rsc
  Enable rules for React Server Components.
• dom
  Enable rules for React DOM.
• web-api
  Enable rules for interacting with Web APIs.
• naming-convention
  Enable rules for naming conventions.

General Purpose

• recommended
  Enforce rules that are recommended by ESLint React for general-purpose React + React DOM projects.
  This preset includes the x, jsx, rsc, dom, web-api, and naming-convention 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

• all
  Enable all rules that do not require type information.
• all-type-checked
  Same as the all preset but enables additional rules that require type information.
• disable-jsx
  Disable rules in the jsx preset.
• disable-rsc
  Disable rules in the rsc preset.
• disable-dom
  Disable rules in the dom preset.
• disable-web-api
  Disable rules in the web-api preset.
• disable-naming-convention
  Disable rules in the naming-convention preset.
• disable-experimental
  Disable rules that have an "🧪 Experimental" feature flag.
• 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.
• disable-conflict-eslint-plugin-react-hooks
  Disable rules in eslint-plugin-react-hooks that conflict with rules in our plugins.
• off
  Disable all rules in this plugin.

Full Presets List ↗

Rules

Rules ↗

FAQ

Frequently Asked Questions ↗

Migration

• Migrating from eslint-plugin-react ↗
• Migrating from eslint-plugin-react-hooks ↗

Changelog

Changelog ↗

Disclaimer

This project is not affiliated with Meta Platforms, Inc. or the react/react project or team, nor is it endorsed or sponsored by them.

This project is, and will remain, 90% of its code written by humans.

Sponsors

A huge thank you to our amazing sponsors who make this project possible.

Contributing

Contributions are welcome!

This project does not have contributing guidelines. Explore the repository to learn how to contribute.

License

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