@eslint-react/eslint-plugin

@eslint-react/eslint-plugin

ESLint plugin for React function components with TypeScript, built (mostly) from scratch.

Public packages

• @eslint-react/eslint-plugin - The main ESLint plugin package including all rules and configs in this repository.
• @eslint-react/jsx - AST Utility Module for Static Analysis of JSX in ESLint.

Supported engines

Node.js

• 18.x LTS Hydrogen
• 20.x Current

Bun

• 1.0.7 or later

Installation

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

# pnpm
pnpm add --save-dev @eslint-react/eslint-plugin

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

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

Usage

.eslintrc.js

module.exports = {
  root: true,
  env: { browser: true, es2021: true },
  parser: "@typescript-eslint/parser",
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@eslint-react/recommended-legacy",
  ],
  plugins: ["@typescript-eslint", "react-hooks"],
  ignorePatterns: ["dist", ".eslintrc.js"],
};

eslint.config.js (requires eslint >= v8.23.0)

import ts from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import react from "@eslint-react/eslint-plugin";
import reactHooks from "eslint-plugin-react-hooks";

export default [
  // TypeScript rules
  {
    files: ["**/*.ts"],
    ignores: ["eslint.config.js"],
    languageOptions: {
      parser: tsParser,
      sourceType: "module",
    },
    plugins: {
      "@typescript-eslint": ts,
    },
    rules: {
      ...ts.configs["eslint-recommended"].rules,
      ...ts.configs["recommended"].rules,
    },
  },
  // React hooks rules
  {
    files: ["src/**/*.{ts,tsx}"],
    plugins: {
      "react-hooks": reactHooks,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
    },
  },
  // React rules
  {
    files: ["src/**/*.{ts,tsx}"],
    ...react.configs.recommended,
  },
];

Rules

Rule List ↗

Philosophy

• Focus on code rather than style.
• Linting errors are better than runtime crashes.
• Types are the fundamental unit of correctness.

Rule introduction or modification principles

1. TypeScript first. If a behavior can already be enforced by TypeScript built-in checker, don't reimplement it.
2. Formatting independent. Rules should check for correctness, not style. We recommend using style focused tools for formatting (e.g. dprint or eslint-stylistic).
3. No Auto-fix. Auto-fix is a great feature, but it's not always safe and reliable. We prefer to not to do auto-fix at all than to implement it in a way that can cause more problems than it solves.
4. Sensible defaults. Rules should be easy to setup and use with minimal configuration and sensible defaults.
5. Rules over Options [1]. Each rule should have a single purpose. Make multiple rules work together to achieve more complex behaviors instead of adding options to a single rule.

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 with the team 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-perfectionist
• eslint-plugin-solid
• eslint-plugin-functional
• eslint-plugin-filenames-simple
• @tanstack/eslint-plugin-query
• rome/tools
• rust-clippy

Prior art

• eslint-plugin-react
• eslint-plugin-react-hooks