React JSX自定义ESLint jsx-curly-spacing规则配置求助

你需要的是区分JSX属性内大括号和组件内容内大括号的差异化间距规则，当前全局配置无法满足这种细分需求，我们可以通过react/jsx-curly-spacing的精细配置来实现你的目标格式。

正确的ESLint配置 #

把现有规则替换成以下配置：

"react/jsx-curly-spacing": ["warn", {
  "attributes": { "when": "never" },
  "children": { "when": "always" },
  "spacing": {
    "objectLiterals": "always"
  }
}]

配置项逐一说明 #

• attributes: { when: "never" }：针对JSX属性里的插值大括号，强制内部无空格，完美匹配你要的attr1={this.props.val1}格式；
• children: { when: "always" }：针对组件内容里的插值大括号，强制内部保留空格，对应示例中的{ this.props.text }；
• spacing.objectLiterals: "always"：确保对象字面量的大括号内部有空格（比如{ object: { key: value } }），同时结合属性的never规则，外层两个大括号会紧挨着，形成你需要的attr2={{ object: { key: value } }}效果。

最终效果验证 #

这个配置会让代码自动符合你的目标格式：

<Component 
  attr1={this.props.val1} 
  attr2={{ object: { key: value } }}
> 
  { this.props.text } 
</Component>

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