Rule for enforcing max 1 prop per line only when tag spans multiple lines

[kentor]

There should be a rule that activates max-props-per-line (with maximum: 1) only when the JSX element spans multiple lines. Furthermore, it should enable jsx-first-prop-new-line only when there are more than 1 prop.

Valid:

<Hello a="a" b="b" /> // does not span multiline, so it's okay to have more than 1 prop per line

<Hello
  a="a"
  b="b"
/> // also fine

<Hello a={{
  foo: 'bar',
}} />

<Hello 
  a={{
    foo: 'bar',
  }} 
/>

<Hello
  a={{
    foo: 'bar',
  }}
  b="b"
/> // enforce first prop new line because prop count > 1 AND it spans multiple lines

Invalid:

<Hello 
  a="a"
  b="b" c="c"
/>

<Hello a={{
  foo: 'bar',
}} b="b" /> // passes now with jsx-max-props-per-line actually... maybe shouldn't?

The current rules jsx-max-props-per-line and jsx-first-prop-new-line are not enough to enforce this.

[ljharb]

What you want would exactly match Airbnb's indentation style, so I'm a strong +1 for this.

[kentor]

Cool. I have an implementation. The issue is with naming, and it's also possible for this rule to conflict with jsx-first-prop-new-line (if it's set to never), so not sure what the protocol is for handling that.

Another option is to extend jsx-first-prop-new-line with "multiprop" option
edit: actually multiprop should only apply when it's multiline

[petersendidit]

Should this be an option of jsx-max-props-per-line?

[kentor]

We could have an option on max-props-per-line to kick in only when tag spans multiple lines. But there's still the issue of enforcing the first prop to be in a new line when there are multiple props and the tag spans multiple lines.

[ljharb]

We may want to do a number of these things.

We should definitely have an option on max-props-per-line to kick in only when the tag spans multiple lines.

If we then still need another rule or option, that's fine.