`jsx-tag-spacing`

JSX の開始および終了ブラケットの内側と周囲の空白を強制します。

開始ブラケットの後、終了ブラケットの前、自己終了要素の終了ブラケットの前、および JSX の終了または自己終了要素の山括弧とスラッシュの間にあるスペースを強制または禁止します。

ルールの詳細

このルールは、JSX 構文要素の内側と周囲の空白をチェックします。

ルールオプション

このルールは、4 つの可能なキー (closingSlash、beforeSelfClosing、afterOpening、および beforeClosing) を持つオブジェクトを 1 つの引数として受け取ります。各キーは、特定のチェックを無効にするために値 "allow" を受け取ることができます。

デフォルト値は次のとおりです。

json

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

各サブオプションのオプションについては、以下のサブセクションで説明します。

`closingSlash`

このチェックは、"always"、"never"、または "allow" (無効にする場合) に設定できます。

"never" の場合、チェックは、JSX トークン </ と /> の 2 つの文字をスペースが区切っている場合に警告します。"always" の場合は、前述の 2 つの文字を区切るスペースがない場合に警告します。このチェックのデフォルト値は "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 ブラケットの内側または周囲の間隔の一貫性を気にしない場合は、このルールをオフにすることができます。

jsx-tag-spacing ​

ルールの詳細 ​

ルールオプション ​

closingSlash ​

beforeSelfClosing ​

afterOpening ​

beforeClosing ​

使用しない場合 ​