JSX 大括号内空格规范详解：react/jsx-curly-spacing 规则指南

规则概述

在 React 的 JSX 语法中，大括号 {} 用于包裹 JavaScript 表达式，包括属性和子元素内容。react/jsx-curly-spacing 是 eslint-plugin-react 中的一个重要规则，专门用于规范 JSX 大括号内部是否需要包含空格。

为什么需要这个规则

代码风格一致性是团队协作中的重要因素。关于大括号内是否应该包含空格，不同团队可能有不同偏好：

1. 紧凑风格：{name} - 无空格，代码更紧凑
2. 宽松风格：{ name } - 有空格，可读性更好

通过配置此规则，可以确保项目中所有开发者遵循相同的空格使用规范。

基本配置选项

默认配置（never）

默认情况下，规则要求大括号内不包含空格：

// .eslintrc.js
module.exports = {
  rules: {
    'react/jsx-curly-spacing': ['error', 'never']
  }
};

正确示例：

<Component prop={value} />

错误示例：

<Component prop={ value } />
<Component prop={value } />
<Component prop={ value} />

要求空格（always）

可以配置为要求大括号内必须包含空格：

// .eslintrc.js
module.exports = {
  rules: {
    'react/jsx-curly-spacing': ['error', 'always']
  }
};

正确示例：

<Component prop={ value } />

错误示例：

<Component prop={value} />
<Component prop={ value} />
<Component prop={value } />

高级配置选项

区分属性和子元素

可以分别配置属性和子元素的空格规则：

// .eslintrc.js
module.exports = {
  rules: {
    'react/jsx-curly-spacing': ['error', {
      when: 'never',       // 默认规则
      attributes: true,    // 检查属性（默认true）
      children: true      // 检查子元素（默认false）
    }]
  }
};

多行内容处理

默认情况下，多行内容不受限制。可以通过 allowMultiline: false 禁止多行内容：

// .eslintrc.js
module.exports = {
  rules: {
    'react/jsx-curly-spacing': ['error', {
      when: 'never',
      allowMultiline: false
    }]
  }
};

错误示例：

<Component prop={
  value
} />

对象字面量特殊处理

可以对对象字面量设置不同的空格规则：

// .eslintrc.js
module.exports = {
  rules: {
    'react/jsx-curly-spacing': ['error', {
      when: 'always',
      spacing: {
        objectLiterals: 'never'  // 对象字面量不使用空格
      }
    }]
  }
};

正确示例：

<Component prop={ {key: value} } />

实际应用建议

1. 团队统一：选择一种风格并在团队中保持一致
2. 可读性优先：对于复杂表达式，适当使用空格提高可读性
3. 结合其他规则：与 object-curly-spacing 规则配合使用

何时禁用此规则

如果项目对 JSX 中的空格使用没有严格要求，或者已经使用 Prettier 等格式化工具统一处理，可以考虑禁用此规则。

总结

react/jsx-curly-spacing 规则提供了灵活的配置选项，帮助开发者维护 JSX 代码中大括号内空格的一致性。通过合理配置，可以在代码整洁度和可读性之间取得平衡，是 React 项目代码风格规范的重要组成部分。