ESLint Stylistic

外观

@stylistic/jsx/

jsx-tag-spacing ​

强制执行 JSX 开头和结尾括号内外的空格。

强制执行或禁止在开头括号后、结尾括号前、自闭合元素的结尾括号前，以及 JSX 结尾或自闭合元素的尖括号和斜杠之间添加空格。

规则详情 ​

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

规则选项 ​

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

默认值为

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

每个子选项的选项在以下小节中记录。

closingSlash ​

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

如果它为 "never"，则每当 JSX 令牌 </ 和 /> 中的两个字符之间用空格分隔时，检查都会发出警告。如果它为 "always"，则每当缺少空格分隔上述两个字符时，它都会发出警告。此检查的默认值为 "never"。

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

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

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

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

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

jsx
<Hello/>
<Goodbye></Goodbye>

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

jsx
<Hello/ >
<Goodbye>< /Goodbye>

beforeSelfClosing ​

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

如果它为 "always"，则每当闭合方括号前缺少空格时，检查都会发出警告。如果为 "never"，则如果闭合方括号前有空格，它会发出警告。此检查的默认值为 "always"。

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

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

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

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

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

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

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

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

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

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

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

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

afterOpening ​

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

如果它为 "always"，则每当 JSX 开头元素或闭合元素的开头方括号后缺少空格时，检查都会发出警告。如果为 "never"，则如果 JSX 开头元素或闭合元素的开头方括号后有空格，它会发出警告。如果为 "allow-multiline"，则它的行为类似于 "never"，但如果分隔符包含换行符，则允许。此检查的默认值为 "never"。

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

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

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

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

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

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

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

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

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

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

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

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

beforeClosing ​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

何时不使用 ​

如果您不关心 JSX 方括号中或周围间距的一致性，则可以关闭此规则。