@stylistic/

jsx-max-props-per-line

强制 JSX 中单行属性的最大数量。

规则详情

此规则检查所有 JSX 元素，并验证每行属性的数量是否超过允许的最大值。如果属性的开始和前一个属性的结束之间存在换行符，则认为属性在新的行中。扩展属性算作一个属性。此规则默认情况下处于关闭状态，并且当打开时，每行属性的默认最大值为 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, { "maximum": 2 }]
<Hello firstName="John" lastName="Smith" tel={5555555} />;

此规则的**正确**代码示例

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

Maximum 可以指定为对象 { single: 1, multi: 1 }，以指定单行和多行标签允许的最大属性数量。

when

仅当 maximum 指定为数字时才应用。

可能的值

• always (默认) - 始终检查每行最大属性数。
• multiline - 仅当 jsx 标签跨越多行时，才检查每行最大属性数。

此规则的**不正确**代码示例

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

此规则的**正确**代码示例

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

何时不使用它

如果您没有使用 JSX，则可以禁用此规则。