jsx-newline
jsx 要素と式の後に改行を必須または禁止します。
ルール詳細
これは、隣接する JSX 要素と式の間に改行を必須または禁止することで、JSX コードの可読性を向上させるためのスタイルルールです。
ルールオプション
json5
...
"@stylistic/jsx/jsx-newline": [<enabled>, { "prevent": <boolean>, "allowMultilines": <boolean> }]
...- enabled: ルールを有効にするかどうか。0=オフ、1=警告、2=エラー。デフォルトは 0 です。
- prevent: オプションのブール値。
trueの場合、隣接する JSX 要素と式の間に空行を禁止します。デフォルトはfalseです。 - allowMultilines: オプションのブール値。
trueであり、preventもtrueの場合、複数行の JSX 要素と式の後に改行を許可します。デフォルトはfalseです。
例
{ "prevent": false } で設定した場合の、このルールの**不正な**コードの例
jsx
<div>
<Button>{data.label}</Button>
<List />
</div>jsx
<div>
<Button>{data.label}</Button>
{showSomething === true && <Something />}
</div>jsx
<div>
{showSomething === true && <Something />}
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>{ "prevent": false } で設定した場合の、このルールの**正しい**コードの例
jsx
<div>
<Button>{data.label}</Button>
<List />
<Button>
<IconPreview />
Button 2
<span></span>
</Button>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>{ "prevent": true } で設定した場合の、このルールの**不正な**コードの例
jsx
<div>
<Button>{data.label}</Button>
<List />
<Button>
<IconPreview />
Button 2
<span></span>
</Button>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>{ "prevent": true } で設定した場合の、このルールの**正しい**コードの例
jsx
<div>
<Button>{data.label}</Button>
<List />
</div>jsx
<div>
<Button>{data.label}</Button>
{showSomething === true && <Something />}
</div>jsx
<div>
{showSomething === true && <Something />}
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>{ "prevent": true, "allowMultilines": true } で設定した場合の、このルールの**不正な**コードの例
jsx
<div>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>{ "prevent": true, "allowMultilines": true } で設定した場合の、このルールの**正しい**コードの例
jsx
<div>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>使用しない場合
JSX 要素と式の間のスペースを気にしていない場合は、このルールをオフにすることができます。