Documentation
Installation

Install

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

Setup

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,
  },
];

Linting with type information

Rules that require type information are not enabled by default.

To enable them, you need to set the project option in parserOptions to the path of your tsconfig.json file.

Then, you can enable the rules that require type information.

eslint.config.js
// @ts-check
 
import js from "@eslint/js";
import react from "@eslint-react/eslint-plugin";
import * as parser from "@typescript-eslint/parser";
 
export default [
  js.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        parser: tsParser,
        project: "./tsconfig.json", // <-- Point to your project's "tsconfig.json" or create a new one.
        tsconfigRootDir: import.meta.dirname,
      },
    },
  }
  {
    files: ["**/*.{ts,tsx}"],
    ...react.configs.recommended,
  },
  {
    files: ["**/*.{ts,tsx}"],
    rules: {
      "@eslint-react/no-leaked-conditional-rendering": "error", // <-- Requires type information
    },
  },
];
Configuration