@stylistic/

jsx-tag-spacing

强制在 JSX 开闭括号内和周围使用空格。

强制或禁止在开括号后、闭括号前、自闭合元素闭括号前以及 JSX 闭合或自闭合元素的尖括号和斜杠之间使用空格。

规则详情

此规则检查 JSX 语法元素内部和周围的空格。

规则选项

此规则接受一个参数，一个包含 4 个可能键的对象：closingSlash、beforeSelfClosing、afterOpening 和 beforeClosing。每个键都可以接收值 "allow" 来禁用该特定检查。

默认值为

{
  "closingSlash": "never",
  "beforeSelfClosing": "always",
  "afterOpening": "never",
  "beforeClosing": "allow"
}

每个子选项的选项在以下小节中说明。

closingSlash

此检查可以设置为 "always"、"never" 或 "allow"（以禁用它）。

如果它是 "never"，则检查会在 JSX 标记 </ 和 /> 中的两个字符之间存在空格时发出警告。如果它是 "always"，则会在缺少空格分隔上述两个字符时发出警告。此检查的默认值为 "never"。

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

<App/ >
<input/
>
<Provider>< /Provider>

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

<App/>
<input/>
<Provider></Provider>

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

<Hello/>
<Goodbye></Goodbye>

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

<Hello/ >
<Goodbye>< /Goodbye>

beforeSelfClosing

此检查可以设置为 "always"、"never"、"proportional-always" 或 "allow"（以禁用它）。

如果它是 "always"，则检查会在缺少右括号之前的空格时发出警告。如果 "never"，则会在右括号之前存在空格时发出警告。此检查的默认值为 "always"。

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

<Hello/>
<Hello firstname="John"/>

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

<Hello />
<Hello firstName="John" />
<Hello
  firstName="John"
  lastName="Smith"
/>

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

<Hello />
<Hello firstName="John" />

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

<Hello/>
<Hello firstname="John"/>
<Hello
  firstName="John"
  lastName="Smith"
/>

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

<Hello
  firstName="John"
  lastName="Smith" />
<Hello
  firstName="John"
  lastName="Smith"/>

当配置为 { "beforeSelfClosing": "proportional-always" } 时，此规则的正确代码示例

<Hello
  firstName="John"
  lastName="Smith"
/>

afterOpening

此检查可以设置为 "always"、"never"、"allow-multiline" 或 "allow"（以禁用它）。

如果它是 "always"，则检查会在 JSX 开启元素或关闭元素的左括号之后缺少空格时发出警告。如果 "never"，则会在 JSX 开启元素或关闭元素的左括号之后存在空格时发出警告。如果 "allow-multiline"，则它的行为类似于 "never"，但允许分隔符包含换行符。此检查的默认值为 "never"。

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

<Hello></Hello>
<Hello firstname="John"/>
<Hello
  firstName="John"
  lastName="Smith"
/>

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

< Hello></ Hello>
< Hello firstName="John"/>
<
  Hello
  firstName="John"
  lastName="Smith"
/>

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

< Hello></ Hello>
< Hello firstName="John"/>
<
  Hello
  firstName="John"
  lastName="Smith"
/>

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

<Hello></Hello>
<Hello firstname="John"/>
<Hello
  firstName="John"
  lastName="Smith"
/>

当配置为 { "afterOpening": "allow-multiline" } 时，此规则的错误代码示例

< Hello></ Hello>
< Hello firstName="John"/>
< Hello
  firstName="John"
  lastName="Smith"
/>

当配置为 { "afterOpening": "allow-multiline" } 时，此规则的正确代码示例

<Hello></Hello>
<Hello firstName="John"/>
<
  Hello
  firstName="John"
  lastName="Smith"
/>

beforeClosing

此检查可以设置为 "always"、"never"、"proportional-always" 或 "allow"（以禁用它）。

如果为 "always"，则检查会在 JSX 开启元素的结束括号之前缺少空格或结束元素的结束括号之前缺少空格时发出警告。如果为 "never"，则会在 JSX 开启元素或结束元素的结束括号之前存在空格时发出警告。此规则永远不会对自闭合 JSX 元素发出警告。此检查的默认值为 "allow"。

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

<Hello></Hello>
<Hello></Hello >
<Hello ></Hello>

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

<Hello ></Hello >
<Hello
  firstName="John"
>
</Hello >

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

<Hello ></Hello>
<Hello></Hello >
<Hello ></Hello >

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

<Hello></Hello>
<Hello
  firstName="John"
>
</Hello>

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

<Hello
  firstName="John"
  lastName="Smith">
</Hello>
<Hello
  firstName="John"
  lastName="Smith" >
  Goodbye
</Hello>

当配置为 { "beforeClosing": "proportional-always" } 时，此规则的正确代码示例

<Hello
  firstName="John"
  lastName="Smith"
>
  Goodbye
</Hello>

何时不使用它

如果您不关心 JSX 括号内或周围空格的一致性，可以关闭此规则。