jsx-tag-spacing
JSXの開始および終了括弧の内外の空白を強制します。
開始括弧の後、終了括弧の前、自己終了要素の終了括弧の前、およびJSXの終了要素または自己終了要素の山括弧とスラッシュの間のスペースを強制または禁止します。
ルールの詳細
このルールは、JSX構文要素の内側と周囲の空白をチェックします。
ルールオプション
このルールは、closingSlash、beforeSelfClosing、afterOpening、beforeClosingの4つのキーを持つオブジェクトを引数として取ります。各キーは、特定のチェックを無効にするために"allow"の値を受け取ることができます。
デフォルト値は次のとおりです。
{
"closingSlash": "never",
"beforeSelfClosing": "always",
"afterOpening": "never",
"beforeClosing": "allow"
}各サブオプションのオプションについては、次のサブセクションで説明します。
closingSlash
このチェックは、"always"、"never"、または"allow"（無効にする）に設定できます。
"never"の場合、JSXトークン</と/>の2つの文字を区切るスペースがあるたびに警告します。"always"の場合、前述の2つの文字を区切るスペースがないたびに警告します。このチェックのデフォルト値は"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括弧の内側または周囲のスペースの一貫性を気にしない場合は、このルールをオフにすることができます。