配置tabWidth为4时Eslint与Prettier仍出现冲突如何解决

问题根源 #

你遇到的报错是配置优先级错误、重复配置和多配置文件冲突共同导致的：

1. .eslintrc.json 中 extends 配置顺序错误，prettier 相关规则未放到最后，被前面的 airbnb 规则覆盖
2. 重复配置了 prettier 相关的 extends 项，导致规则冲突
3. package.json 中自带的 eslintConfig 字段和根目录的 .eslintrc.json 同时生效，优先级混乱
4. airbnb 规则默认强制缩进为2空格，未显式关闭 ESLint 自带的缩进校验规则，和 Prettier 配置的4空格冲突

具体修改步骤 #

1. 修正 .eslintrc.json 配置 #

调整 extends 顺序，删除重复配置，显式关闭 ESLint 自带的缩进校验规则，交由 Prettier 统一处理：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "parser": "babel-eslint",
  "plugins": ["react"],
  "rules": {
    "prettier/prettier": ["error"],
    "indent": "off",
    "react/jsx-indent": "off",
    "react/jsx-indent-props": "off"
  }
}

说明：plugin:prettier/recommended 已经内置了 eslint-config-prettier 的全部规则，不需要再单独添加 "prettier" 到 extends 列表中。所有代码规范类配置必须放在 Prettier 配置之前，保证 Prettier 规则可以覆盖冲突项。

2. 删除 package.json 中的重复 ESLint 配置 #

删除 package.json 里的 eslintConfig 字段，避免多配置文件冲突：

// 删掉下面这段内容
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

3. 生效配置 #

执行以下命令全局格式化项目代码，然后重启编辑器的 ESLint 服务即可：

npx prettier --write .

额外排查项 #

如果修改后仍有报错，检查编辑器格式化配置：

• 确认编辑器默认格式化工具设置为 Prettier，没有同时开启其他格式化插件
• 确认编辑器没有自定义缩进配置，优先使用项目配置文件的规则

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