コンテンツへスキップ

@stylistic/jsx/

jsx-first-prop-new-line

JSXにおける最初のプロパティの位置を強制します。

ルール詳細

このルールは、すべてのJSX要素の最初のプロパティが正しく配置されているかどうかをチェックします。可能な設定は以下のとおりです。

  • always: 最初のプロパティは常に新しい行に配置する必要があります。
  • never: 最初のプロパティは決して新しい行に配置してはなりません。例えば、コンポーネントの開始タグと同じ行に配置する必要があります。
  • multiline: JSXタグが複数行にまたがる場合、最初プロパティは常に新しい行に配置する必要があります。
  • multiprop: 複数プロパティがない限り、最初プロパティは新しい行に配置してはなりません。
  • multiline-multiprop: JSXタグが複数行にまたがり、かつ複数プロパティがある場合、最初プロパティは常に新しい行に配置する必要があります。これはデフォルト値です。

"always"で設定した場合の、このルールに違反するコードの例

jsx
<Hello personal={true} />

<Hello personal={true}
    foo="bar"
/>

"always"で設定した場合の、このルールに準拠するコードの例

jsx
<Hello
    personal />

<Hello
    personal
/>

"never"で設定した場合の、このルールに違反するコードの例

jsx
<Hello
    personal />

<Hello
    personal
/>

"never"で設定した場合の、このルールに準拠するコードの例

jsx
<Hello personal={true} />

<Hello personal={true}
    foo="bar"
/>

"multiline"で設定した場合の、このルールに違反するコードの例

jsx
<Hello personal
    prop />
jsx
<Hello foo={{
}} />

"multiline"で設定した場合の、このルールに準拠するコードの例

jsx
<Hello personal={true} />

<Hello
    personal={true}
    foo="bar"
/>

"multiline-multiprop"で設定した場合の、このルールに違反するコードの例

jsx
<Hello foo={{
    }}
    bar />

"multiline-multiprop"で設定した場合の、このルールに準拠するコードの例

jsx
<Hello foo={{
}} />

<Hello
    foo={{
    }}
    bar
/>

ルールオプション

jsx
"@stylistic/jsx/jsx-first-prop-new-line": `"always" | "never" | "multiline" | "multiprop" | "multiline-multiprop"`

使用しない場合

JSXを使用していない場合は、このルールを無効にできます。

MITライセンスの下で公開されています。