JSX代码使用ESLint时出现缩进及闭合标签位置报错求助

这问题我之前帮不少开发者捋清楚过——核心是你只覆盖了全局的indent规则，但没同步调整React JSX相关的缩进配置，导致和Airbnb ESLint预设的4空格规则冲突，才触发了这两个报错。

问题根源 #

Airbnb的ESLint配置中，react/jsx-indent默认要求JSX元素用4空格缩进，而你全局设置了indent: ["warn", 2]，JSX部分的缩进规则没跟上；react/jsx-closing-tag-location的报错则是因为标签闭合位置的缩进预期还是4空格，和你实际写的2空格不匹配。

修复方案 #

你需要在.eslintrc的rules里明确覆盖这两个（还有关联的react/jsx-indent-props）规则，让它们和你的2空格缩进统一：

{
  "extends": "airbnb",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "rules": {
    "max-len": ["warn", 120],
    "indent": ["warn", 2],
    // 强制JSX元素缩进为2空格，和全局规则对齐
    "react/jsx-indent": ["warn", 2],
    // 确保JSX属性的缩进也是2空格
    "react/jsx-indent-props": ["warn", 2],
    // 调整闭合标签位置规则，适配2空格缩进
    "react/jsx-closing-tag-location": ["warn", {
      "selfClosing": "after-props",
      "nonEmpty": "same-line"
    }]
  }
}

配置说明 #

• react/jsx-indent: 让JSX元素的缩进和全局的2空格规则保持一致，解决Expected indentation of 4 space characters but found 2的报错。
• react/jsx-indent-props: 同步JSX属性的缩进要求，避免后续出现属性缩进的额外报错。
• react/jsx-closing-tag-location: 调整闭合标签的位置规则，比如非空标签的闭合标签和起始标签同线，自闭合标签在属性之后换行缩进，这样就符合Expected closing tag to match indentation of opening的要求了。

符合规则的JSX示例 #

const MyComponent = () => (
  <div className="container">
    <h1>Hello React</h1>
    <button onClick={() => handleClick()}>
      Submit
    </button>
    <input
      type="email"
      placeholder="Enter your email"
      required
    />
  </div>
);

最后别忘了重启一下ESLint服务或者重新打开编辑器，确保新配置生效。

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