ESLint规则react/jsx-indent配置无效报错求助

你遇到的这个报错根源很明确——react/jsx-indent规则的配置格式完全错误了。咱们先拆解问题，再给你修正后的配置：

错误原因分析 #

ESLint的react/jsx-indent规则只接受两种合法配置形式：

• 单个数字：直接指定JSX元素的缩进空格数
• 数组形式：第一个元素是错误级别（比如"error"或"warn"），第二个元素是配置项（可以是数字，或者包含额外规则的对象）

而你的配置里写成了：

"react/jsx-indent": "4,[object Object]"

这把配置当成了一个混乱的字符串，其中[object Object]是对象被强制转成字符串后的无效内容。ESLint判定这个字符串不符合规则要求的“最多1个配置项”，所以抛出了报错。

修正后的完整配置 #

假设你需要指定JSX缩进为4个空格，同时保留其他原有规则，修正后的配置如下：

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "import/no-extraneous-dependencies": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "eol-last": "off",
    "no-unused-expressions": ["error", {
      "allowTernary": true,
      "allowShortCircuit": true
    }],
    "react/jsx-indent": ["error", 4]
  }
}

如果还需要额外配置（比如检查JSX属性的缩进），可以写成数组+对象的形式：

"react/jsx-indent": ["error", 4, { "checkAttributes": true }]

最后提示 #

修改完配置后，记得重启你的ESLint服务或者重新运行校验命令，确保新配置生效。

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