logoESLint React
Getting Started

TypeScript

Getting started using ESLint React in your TypeScript React project

This instruction requires the following minimum versions:

  • node@18.18.0
  • eslint@8.57.0
  • typescript@4.9.5

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 TypeScript (Optional)

tsconfig.json
{
  "compilerOptions": {
    // ...other options
    "jsx": "react-jsx",
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

On this page