@eslint-react/eslint-plugin

ESLint React

More than 80 high-quality linting rules for writing better React code.

Features

• Flexible: Increased flexibility with more granular severity control.
• Comprehensive: First-class support for TypeScript, React 19, polymorphic components.
• Advanced Analysis: Handles complex scenarios and identifies problems that other tools might miss.

Public Packages

All-In-One Plugin

• @eslint-react/eslint-plugin - The main ESLint plugin package including all rules and config presets in this repository.

Modular Plugins

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

Installation

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,
  ],
  languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      projectService: true,
    },
  },
  rules: {
    // Put rules you want to override here
    "@eslint-react/prefer-shorthand-boolean": "warn",
  },
});

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 ↗

Notable Projects Using ESLint React

Community ESLint Configs Adopting ESLint React

• antfu/eslint-config - Anthony's ESLint config preset.
• eslint-config-rebeccastevens - Rebecca's ESLint config preset.
• eslint-config-sheriff - A comprehensive and opinionated Typescript-first ESLint configuration.
• eslint-config-sukka - Sukka's ESLint config preset.
• fullstacksjs/eslint-config - FullstacksJS ESLint config preset.

Data collected from GitHub dependents network, if there are any mismatch or outdated information, feel free to open issue or pull request.

Find more on GitHub Dependents.

Contributing

Please follow our contributing guidelines.

License

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

Inspiration

• eslint-plugin-solid
• eslint-plugin-functional
• eslint-plugin-perfectionist
• eslint-plugin-filenames-simple
• biomejs.dev/linter/rules-sources/#eslint-plugin-react