Closed
Description
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.
Activity
[-]Rule for enforcing each prop to be in a new line if jsx element spans multiple lines[/-][+]Rule for enforcing max 1 prop per line only when tag spans multiple lines[/+]ljharb commentedon Oct 2, 2016
What you want would exactly match Airbnb's indentation style, so I'm a strong +1 for this.
kentor commentedon Oct 2, 2016
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" optionedit: actually multiprop should only apply when it's multiline
petersendidit commentedon Oct 3, 2016
Should this be an option of
jsx-max-props-per-line
?kentor commentedon Oct 3, 2016
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 commentedon Oct 3, 2016
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.