寻求React ESLint规则：格式化JSX花括号内代码缩进

要实现你期望的JSX花括号内代码格式化效果，需要配置以下几个React ESLint规则：

核心规则配置 #

在你的ESLint配置文件（如.eslintrc.js）中添加或修改以下规则：

module.exports = {
  plugins: ['react'],
  rules: {
    // 规定JSX元素（包括花括号）的缩进为2空格
    'react/jsx-indent': ['error', 2],
    // 规定JSX属性的缩进为2空格
    'react/jsx-indent-props': ['error', 2],
    // 让原生缩进规则忽略JSX相关节点，避免与React规则冲突
    'indent': ['error', 2, {
      'ignoredNodes': [
        'JSXElement',
        'JSXElement > *',
        'JSXAttribute',
        'JSXIdentifier',
        'JSXNamespacedName',
        'JSXMemberExpression',
        'JSXSpreadAttribute',
        'JSXExpressionContainer',
        'JSXOpeningElement',
        'JSXClosingElement',
        'JSXFragment',
        'JSXOpeningFragment',
        'JSXClosingFragment',
        'JSXText'
      ]
    }]
  }
};

规则作用说明 #

• react/jsx-indent：控制JSX结构的整体缩进，让花括号{相对于外层<div>缩进2空格，匹配你期望的格式。
• indent的ignoredNodes配置：避免原生缩进规则干扰JSX内的表达式，确保花括号内的items.map代码相对于花括号再缩进2空格。
• react/jsx-indent-props：保持JSX属性的缩进一致性，和整体缩进规范统一。

效果对比 #

格式化前代码 #

<div>
   {
              items.map(i => (<div>{i}</div>))
           }
</div>

格式化后代码（符合期望） #

<div>
  {
      items.map(i => (<div>{i}</div>))
  }
</div>

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