@eslint-react/eslint-plugin

ESLint React

A series of composable ESLint plugins for libraries and frameworks that use React as a UI runtime.

[!IMPORTANT]
eslint-react is not a fork of eslint-plugin-react and meanwhile eslint-plugin-react is not upstream of eslint-react.

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

Who is using?

• AndreaPontrandolfo/sheriff - A comprehensive and opinionated Typescript-first ESLint configuration.
• 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.
• electric-sql/pglite - Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno.
• ensdomains/ensdomains-landing - ENS Homepage V2, the main homepage of the ENS protocol.
• hairyf/overlastic - A universal overlays utils, support react, vue, vanilla, svelte.
• hipstersmoothie/react-window-splitter - A full featured window splitter for React.
• johannschopplich/unlazy - Universal lazy loading library for placeholder images leveraging native browser APIs.
• npmgraph/npmgraph - A tool for exploring NPM modules and dependencies.
• react-navigation/​react-navigation - Routing and navigation for your React Native apps.
• RebeccaStevens/eslint-config-rebeccastevens - RebeccaStevens' ESLint config preset.
• refined-github/refined-github - :octocat: Browser extension that simplifies the GitHub interface and adds useful features.
• RSSNext/​follow - 🧡 Next generation information browser.
• satya164/PocketGear - A clean and simple Pokédex app for Pokémon GO.
• 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.
• toss/suspensive - Manage asynchronous operations, timing, error handling, detecting intersection of elements, and caching easily and declaratively (One of TanStack Query community resources).

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.

Install

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

# yarn
yarn add --dev @eslint-react/eslint-plugin

# pnpm
pnpm add --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

• core
  Enable rules that are renderer-agnostic.
• dom
  Enable rules that are specific to React DOM.
• web-api
  Enable rules for interacting with Web APIs.
• recommended
  Enable rules that are recommended by ESLint React.
  This preset includes the core, dom, and web-api presets.
• recommended-type-checked
  Enable rules that are recommended by ESLint React with additional rules that require type information.
  This preset includes the recommended preset.

Legacy Config

Click to toggle contents

• core-legacy
  Enable rules that are renderer-agnostic.
• dom-legacy
  Enable rules that are specific to React DOM.
• web-api-legacy
  Enable rules for interacting with Web APIs.
• recommended-legacy
  Enable rules that are recommended by ESLint React.
  This preset includes the core-legacy, dom-legacy, and web-api-legacy presets.
• recommended-type-checked-legacy
  Enable rules that are recommended by ESLint React with additional rules that require type information.
  This preset includes the recommended-legacy preset.

Full Presets List↗

Rules

Rules Overview ↗

FAQ

Frequently Asked Questions ↗

Roadmap

• Milestone 2.0 ↗
• Milestone 3.0 ↗

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!

Contribution Stats

Active Contributors

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

Changelog

v1.12.4 (Sat 31 Aug 2024)

✨ New

• Added useLayoutEffect and useInsertionEffect support to hooks-extra/no-direct-set-state-in-use-effect.

🪄 Improvements

• Deprecate rule hooks-extra/no-direct-set-state-in-use-layout-effect in favor of hooks-extra/no-direct-set-state-in-use-effect (the previous rule will still be available until the next major update to avoid breaking changes).