React项目用ESLint和Prettier设2空格缩进的冲突问题求助

你的问题根源在于ESLint原生indent规则和Prettier的缩进配置冲突，加上react-app内置ESLint配置的干扰，以及package.json里的冗余ESLint配置导致规则优先级混乱。按以下步骤修改即可解决：

1. 替换ESLint缩进规则 #

删掉.eslintrc里的原生indent规则，改用TypeScript专用的缩进规则——原生规则对TS语法支持差，极易和Prettier产生冲突。修改后的.eslintrc规则部分如下：

"rules": {
  // 移除原有 "indent": ["error", 2]
  "@typescript-eslint/indent": ["error", 2],
  // 其余规则保持不变...
},
"overrides": [
  {
    "files": ["**/*.stories.*"],
    "rules": {
      // 移除原有 "indent": ["error", 2]
      "@typescript-eslint/indent": ["error", 2],
      "import/no-anonymous-default-export": "off"
    }
  }
]

2. 调整ESLint扩展顺序 #

确保plugin:prettier/recommended在extends数组的最后，保证Prettier规则优先级最高，覆盖其他ESLint规则：

"extends": [
  "eslint:recommended",
  "react-app",
  "react-app/jest",
  "plugin:prettier/recommended" // 移至末尾
]

3. 清理package.json冗余配置 #

删掉package.json里的eslintConfig字段，它会和根目录的.eslintrc产生冲突，导致部分规则不生效：

// 删除这段配置
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}

4. 同步编辑器设置 #

确保你的代码编辑器（如VS Code）缩进设置与配置一致：

• 设为2个空格缩进
• 关闭“使用制表符代替空格”选项

最后验证 #

执行以下命令批量修复所有格式问题：

npx eslint . --fix
npx prettier --write .

完成以上操作后，ESLint和Prettier就能统一使用2个空格缩进，不再出现规则冲突。

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