@stylistic/jsx/

jsx-max-props-per-line

JSX 内の 1 行あたりの maximum の props を強制します。

ルール詳細

このルールは、すべての JSX 要素を確認して、1 行あたりの props の数が最大許容量を超えていないことを確認します。プロパティは、プロパティの開始と前のプロパティの終了の間に改行がある場合、新しい行にあると見なされます。スプレッド属性は 1 つのプロパティとしてカウントされます。このルールはデフォルトではオフになっており、オンのときは 1 行あたりの最大プロパティ数のデフォルトは 1 です。

このルールに対する正しくないコードの例

<Hello lastName="Smith" firstName="John" />;

<Hello foo={{
  bar
}} baz />;

このルールに対する正しいコードの例

<Hello
  firstName="John"
  lastName="Smith"
/>;

<Hello
  {...this.props}
  firstName="John"
  lastName="Smith"
/>;

ルールオプション

...
"@stylistic/jsx/jsx-max-props-per-line": [<enabled>, { "maximum": <number>, "when": <string> }]
...

// OR

...
"@stylistic/jsx/jsx-max-props-per-line": [<enabled>, { "maximum": { "single": <number>, "multi": <number> } }]
...

maximum

1 行あたりに許可されるプロパティの最大数。デフォルトは 1 です。

このルールに対する正しくないコードの例

// [1, { "maximum": 2 }]
<Hello firstName="John" lastName="Smith" tel={5555555} />;

このルールに対する正しいコードの例

// [1, { "maximum": 2 }]
<Hello
  firstName="John" lastName="Smith"
  tel={5555555}
/>;

最大値は、単一行のタグと複数行のタグに許可されるプロパティの最大数を指定するためにオブジェクト { single: 1, multi: 1 } と指定できます。

when

maximum が数値として指定されている場合にのみ適用されます。

使用可能な値

• always (デフォルト) - 常に 1 行あたりの maximum props を確認します。
• multiline - JSX タグが複数行にまたがる場合にのみ 1 行あたりの maximum props を確認します。

このルールに対する正しくないコードの例

// [1, { "when": "always" }]
<Hello firstName="John" lastName="Smith" />

このルールに対する正しいコードの例

// [1, { "when": "multiline" }]
<Hello firstName="John" lastName="Smith" />
<Hello
  firstName="John"
  lastName="Smith"
/>

使用しない場合

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