ESLint React

A series of composable ESLint rules rewritten from scratch for libraries and frameworks that use React as a UI runtime.

Roadmap

• Milestone 2.0 ↗
• Milestone 3.0 ↗

Features

• Universal rules for libraries and frameworks that use React as a UI runtime.
• Well designed rule behaviors and sensible defaults.
• Maximum flexibility through minimum rule options.

Public packages

All-in-one plugins

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

Mono plugins (will be available in 2.0)

• 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-hooks-extra - Extra React Hooks rules.
• eslint-plugin-react-naming-convention - Naming convention rules.

Supported engines

Node.js

• 18.18.0 or later

Bun

• 1.0.15 or later

Install

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

Setup

Flat Config

Add the plugin to your eslint.config.js:

// @ts-check

import js from "@eslint/js";
import react from "@eslint-react/eslint-plugin";
import * as tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    ...react.configs.recommended,
    languageOptions: {
      parser: tsParser,
    },
  },
];

Legacy Config

Add the plugin to your .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@eslint-react/eslint-plugin"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "extends": [
        "plugin:@eslint-react/recommended-legacy"
      ]
    }
  ]
}

Full Installation Guide ↗

Presets

Flat Config

• recommended
  Enable rules that are recommended by ESLint React.
• recommended-type-checked
  Enable rules that are recommended by ESLint React with additional rules that require type information.
• dom
  Enable rules that are specific to React DOM.
• off-dom
  Disable rules that are specific to React DOM.
• off
  Disable all rules in this plugin except for debug rules.

Legacy Config

• recommended-legacy
  Enable rules that are recommended by ESLint React.
• recommended-type-checked-legacy
  Enable rules that are recommended by ESLint React with additional rules that require type information.
• dom-legacy
  Enable rules that are specific to React DOM.
• off-dom-legacy
  Disable rules that are specific to React DOM.
• off-legacy
  Disable all rules in this plugin except for debug rules.

Full Presets List↗

Rules

Rules Overview ↗

FAQ

Frequently Asked Questions ↗

Who is using?

• antfu/​eslint-config - Anthony's ESLint config preset.
• christopher-buss/roblox-ts-eslint-config - iSentinel's ESLint config preset for Roblox-TS.
• DimensionDev/Maskbook - The portal to the new, open Internet. ([I:b]).
• dream-num/univer - Univer is an open-source alternative to Google Sheets, Slides, and Docs.
• hairyf/overlastic - A universal overlays utils, support react, vue, vanilla, svelte.
• react-navigation/​react-navigation - Routing and navigation for your React Native apps.
• RSSNext/​follow - 🧡 Next generation information browser.
• SukkaW/eslint-config-sukka - ESLint configuration of Sukka.
• SukkaW/foxact - React Hooks/Utils done right. For Browser, SSR, and React Server Components.
• TanStack/​form - 🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.
• TanStack/​query - 🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
• TanStack/​router - 🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
• TanStack/​store - 🤖 Framework agnostic, type-safe store w/ reactive framework adapters.

Find more projects using ESLint React on GitHub.

Contributing

Before you start working on something, it's best to check if there is an existing issue first. It's also a good idea to reach the maintainer and confirm if it makes sense or if someone else is already working on it.

Please make sure to read the Contributing Guide before making a pull request.

Thank you to everyone contributing to ESLint React!

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
• rome/tools
• rust-clippy

Prior art

• eslint-plugin-react