@stylistic/

jsx-max-props-per-line

JSX内の1行あたりのプロパティ数の最大値を強制します。

ルール詳細

このルールはすべてのJSX要素をチェックし、1行あたりのプロパティ数が許可された最大値を超えていないことを検証します。プロパティは、プロパティの先頭と前のプロパティの終了の間に改行がある場合、新しい行にあると見なされます。スプレッド属性は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行あたりの最大プロパティ数をチェックします。
• multiline - jsxタグが複数行にまたがる場合にのみ、1行あたりの最大プロパティ数をチェックします。

このルールの不正なコードの例

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

このルールの正しいコードの例

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

使用しない場合

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