@stylistic/jsx/

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}
/>;

最大值可以指定为对象 { 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，则可以禁用此规则。