ESLint 样式

外观

@stylistic/

jsx-curly-spacing ​

强制或禁止在 JSX 属性和表达式中花括号内使用空格。

规则详情 ​

此规则旨在维护 JSX 属性和元素子元素中的表达式内部空格的一致性。

它要求或禁止在这些括号和它们内部的值之间使用空格。

规则选项 ​

此规则有两个主要选项

  • {"when": "always"} 强制在花括号内使用空格
  • {"when": "never"} 禁止在花括号内使用空格（默认）

还有两个属性允许指定规则如何与属性（attributes）和表达式（children）一起使用。可能的值是

  • true 使用选项启用空格检查（attributes 的默认值），例如 {"attributes": false} 禁用属性检查
  • false 禁用空格检查（children 的默认值，为了向后兼容），例如 {"children": true} 启用表达式检查
  • 包含覆盖全局选项的选项的对象，例如 {"when": "always", "children": {"when": "never"}} 强制在属性内使用空格，但禁止在表达式内使用空格

从不 ​

当配置为 { "when": "never" } 时，此规则的错误代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;

此规则的正确代码示例。

jsx
<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

当配置为 { "when": "never", "children": true } 时，此规则的错误代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{ firstname }</Hello>;

此规则的正确代码示例。

jsx
<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;

始终 ​

当配置为 { "when": "always" } 时，此规则的错误代码示例。

jsx
<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;

此规则的正确代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;

当配置为 { "when": "always", "children": true } 时，此规则的错误代码示例。

jsx
<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{firstname}</Hello>;

此规则的正确代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

跨越多行的花括号 ​

默认情况下，跨越多行的花括号在两种设置下都是允许的。如果您想禁止它们，您可以指定一个额外的 allowMultiline 属性，其值为 false

json
"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "never", "allowMultiline": false}]

当配置为 "never" 和 "allowMultiline": false 时，此规则的错误代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello name={
  firstname
} />;

此规则的正确代码示例。

jsx
<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

当配置为 "always" 和 "allowMultiline": false 时，此规则的错误代码示例。

jsx
<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello name={
  firstname
} />;

此规则的正确代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

当配置为 { "when": "never", "attributes": { "allowMultiline": false }, "children": true } 时，此规则的错误代码示例。

jsx
<Hello name={ firstname } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;

此规则的正确代码示例。

jsx
<Hello name={firstname} />;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;

细粒度间距控制 ​

您可以指定一个额外的 spacing 属性，它是一个包含以下可能值的 object。

json
"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "always", "spacing": {
  "objectLiterals": "never"
}}]
  • objectLiterals：当 jsx 花括号内的值为 object literal 时，这将控制不同的间距要求。

所有间距选项都接受字符串 "always" 或字符串 "never"。请注意，所有“间距”选项的默认值与提供的第一个“always”/“never”选项匹配。

当配置为 "always" 和 { "objectLiterals": "never" } 时，此规则的正确代码示例。

jsx
<App blah={ 3 } foo={{ bar: true, baz: true }} />;

当配置为 "never" 和 { "objectLiterals": "always" } 时，此规则的正确代码示例。

jsx
<App blah={3} foo={ {bar: true, baz: true} } />;

请注意，object literal 花括号本身的间距由内置的 object-curly-spacing 规则控制。

简写选项 ​

为了保持向后兼容性，支持两个额外的选项

json
"@stylistic/jsx/jsx-curly-spacing": [2, "always"]

这是

json
"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "always"}]

和

json
"@stylistic/jsx/jsx-curly-spacing": [2, "never"]

这是

json
"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "never"}]

的简写。当使用简写选项时，只会检查属性。要指定其他选项，请使用另一个参数

json
"@stylistic/jsx/jsx-curly-spacing": [2, "never", {
  "allowMultiline": false,
  "spacing": {"objectLiterals": "always"}
}]

何时不使用它 ​

如果您不关心 JSX 属性或表达式内部间距的一致性，可以关闭此规则。