logoESLint React
Getting Started

TypeScript

Getting started using ESLint React in your TypeScript React project

This instruction requires the following minimum versions:

Installation

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

Configure ESLint

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"],
 
  // Extend recommended rule sets from:
  // 1. ESLint JS's recommended rules
  // 2. TypeScript ESLint recommended rules
  // 3. ESLint React's recommended-typescript rules
  extends: [
    eslintJs.configs.recommended,
    tseslint.configs.recommended,
    eslintReact.configs["recommended-typescript"],
  ],
 
  // Configure language/parsing options
  languageOptions: {
    // Use TypeScript ESLint parser for TypeScript files
    parser: tseslint.parser,
    parserOptions: {
      // Enable project service for better TypeScript integration
      projectService: true,
    },
  },
 
  // Custom rule overrides (modify rule levels or disable rules)
  rules: {
    "@eslint-react/no-class-component": "error",
  },
});

Configure Language Service Integration (Optional)

eslint.config.js
// @ts-check
import tseslint from "typescript-eslint";
 
export default [
  {
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
];
tsconfig.json
{
  "compilerOptions": {
    // ...other options
    "jsx": "react-jsx",
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

TIP

Once you've correctly configured the language service integration for the files to be linted, ESLint React utilizes the information from the TypeScript compiler to provide better linting results.

For more information, see the Configure Language Config section.

On this page