ESLint 样式

外观

@stylistic/jsx/

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 属性，它是一个包含以下可能值的 对象

json
"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "always", "spacing": {
  "objectLiterals": "never"
}}]
  • objectLiterals: 此选项控制 JSX 花括号内值为对象字面量时的不同间距要求。

所有间距选项都接受字符串 "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-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 属性或表达式内部间距的一致性，可以关闭此规则。