如何将React+TS项目的ESLint从.eslintrc迁移到扁平配置？

原.eslintrc配置 #

{
  {/*common config*/}
  "overrides": [
    {
      // 核心问题所在
      "files": ["**/*.{ts,tsx}"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": 2020,
        "sourceType": "module",
        "project": ["./tsconfig.json", "./e2e/tsconfig.json"]
      },
      "globals": {
        "React": true,
        "JSX": true
      },
      "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:react/recommended"
      ],
      "rules": {
        "react/require-default-props": "off"
      }
    }
  ]
}

尝试的扁平配置（eslint.config.mjs） #

export default [
{
  {/*common config*/},
  // 转换后的配置
  ...tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    ...tseslint.configs.recommendedTypeChecked,
    {
      ignores: ['**/*.{js,jsx}', 'config/*.js', "./deploy.js"],
      languageOptions: {
        parserOptions: {
          project: ['./tsconfig.json'],
          tsconfigRootDir: import.meta.dirname,
        },
      },
      rules: {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
        "react/require-default-props": "off"
      }
    }
  )
]

报错信息（翻译后） #

Oops! Something went wrong! :(

ESLint: 9.3.0

错误：加载规则'@typescript-eslint/await-thenable'时出错：你使用了需要生成parserServices的规则。因此必须为@typescript-eslint/parser提供"parserOptions.project"属性的值。
解析器：undefined
注意：检测到非@typescript-eslint/parser的解析器。请确保解析器配置为将"parserOptions.project"转发给@typescript-eslint/parser。

问题分析与解决方案 #

核心问题 #

1. 未指定TS解析器：没有明确为TS/TSX文件设置@typescript-eslint/parser，导致类型检查规则无法获取必要的parserServices。
2. 配置范围错误：用ignores排除JS文件的方式不合理，应该针对TS/TSX文件单独配置files，确保类型检查规则只应用在需要的文件上。
3. 重复扩展配置：重复使用...tseslint.configs.recommended会产生冗余配置。
4. 缺少React插件配置：原配置中的plugin:react/recommended需要在扁平配置中手动引入React插件并启用。

正确的扁平配置示例 #

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import reactPlugin from 'eslint-plugin-react';

export default [
  // 通用忽略配置
  {
    ignores: ['config/*.js', './deploy.js'],
  },
  // JS/JSX文件基础配置（按需添加）
  {
    files: ['**/*.{js,jsx}'],
    ...eslint.configs.recommended,
  },
  // TS/TSX文件专属配置
  ...tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    ...tseslint.configs.recommendedTypeChecked,
    {
      files: ['**/*.{ts,tsx}'],
      languageOptions: {
        parser: tseslint.parser, // 明确指定TS解析器
        parserOptions: {
          ecmaFeatures: { jsx: true },
          ecmaVersion: 2020,
          sourceType: 'module',
          project: ['./tsconfig.json', './e2e/tsconfig.json'], // 还原原配置的多tsconfig
          tsconfigRootDir: import.meta.dirname,
        },
        globals: {
          React: 'readonly',
          JSX: 'readonly',
        },
      },
      plugins: {
        react: reactPlugin, // 引入React插件
      },
      rules: {
        ...reactPlugin.configs.recommended.rules, // 启用React推荐规则
        'react/require-default-props': 'off',
        'no-use-before-define': 'off',
        '@typescript-eslint/no-use-before-define': ['error'],
      },
      settings: {
        react: {
          version: 'detect', // 自动检测React版本
        },
      },
    }
  ),
];

关键修改点说明 #

• 指定TS解析器：通过languageOptions.parser: tseslint.parser明确设置解析器，确保类型检查规则能获取parserServices。
• 精准匹配文件：用files: ['**/*.{ts,tsx}']限定TS配置的应用范围，避免类型检查规则作用在JS文件上。
• 还原多tsconfig配置：把原配置中的./e2e/tsconfig.json加回到project数组中，确保所有TS文件都能被正确类型检查。
• 添加React插件支持：手动引入eslint-plugin-react，并启用其推荐规则，同时设置React版本自动检测。
• 优化配置结构：拆分通用配置、JS配置和TS配置，逻辑更清晰，避免规则冲突。

内容的提问来源于stack exchange，提问作者uvuy1234