ESLint rules块与extends配置冲突 缩进校验双向报错

冲突成因 #

出现双向报错、eslint --fix无法自动修复的核心原因不是配置优先级失效，是规则覆盖不全+规则名配置错误：

• airbnb-typescript规则集默认会关闭原生ESLint的indent规则，在TS/TSX文件中启用@typescript-eslint/indent规则执行缩进校验，该规则默认继承Airbnb的2空格缩进配置，当前配置中没有覆盖这条规则。
• 配置的react/tsx-indent是不存在的无效规则，不会产生任何校验效果。
• 最终生效的规则中，react/jsx-indent要求4空格缩进，未被覆盖的@typescript-eslint/indent要求2空格缩进，两个规则判定标准完全相反，才会出现无论写2空格还是4空格都会报错、自动修复来回冲突的问题。

修复步骤 #

1. 修改package.json中eslintConfig.rules配置，删除无效规则，补全对TS专属缩进规则的覆盖，修正后配置如下：

"rules": {
  // 关闭原生indent规则，避免与TS专属缩进规则重复校验
  "indent": "off",
  // 覆盖airbnb-typescript默认的TS缩进规则
  "@typescript-eslint/indent": ["error", 4],
  // 覆盖JSX缩进规则
  "react/jsx-indent": ["error", 4],
  // 可选：同步配置JSX属性缩进为4空格，避免属性缩进单独报错
  "react/jsx-indent-props": ["error", 4],
  "react/jsx-filename-extension": [
    1,
    {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  ]
}

2. 清理ESLint缓存后重新执行校验：

# 清理缓存
rm -rf node_modules/.cache/eslint
# 重新执行校验+自动修复
npx eslint . --fix

3. 若仍有异常，可执行以下命令打印指定文件实际生效的完整ESLint配置，搜索indent相关项确认所有缩进规则值均为4，排查是否有其他配置文件残留冲突：

npx eslint --print-config 你的测试文件路径.tsx

注：配置中root: true已经生效，正常情况下不会读取项目目录外的上级ESLint配置，只需排查项目根目录下是否存在.eslintrc、.eslintrc.js、.eslintrc.json等其他格式的ESLint配置文件，这类配置文件优先级高于package.json内的eslintConfig字段，若存在会导致配置覆盖。

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