jsx-改行
JSX要素と式の後で改行が必要または禁止
ルール詳細
隣接するJSX要素と式間に改行を強制または禁止することでJSXコードの読みやすさを向上させることを目的としたスタイルルールです。
ルールオプション
json5
...
"@stylistic/jsx/jsx-newline": [<enabled>, { "prevent": <boolean>, "allowMultilines": <boolean> }]
...- 有効化: ルールを有効にします。0 = オフ、1 = 警告、2 = エラー。既定値は0です。
- 防止: オプションのブール値。
trueの場合、隣接するJSX要素と式の間に空行を挿入しません。既定値はfalseです。 - 複数行の許可: オプションのブール値。
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要素と式のスペースを考慮していない場合は、このルールをオフにすることができます。