Add flag to react/jsx-max-props-per-line's 'when'

[NoPhaseNoKill]

Hey there,

I'm after a configuration that allows me to do the following:

The following patterns are considered warnings:

<Hello lastName="Smith" 
  firstName="John" 
/>;
<Hello lastName="Smith" middleName="Bob" firstName="John" />
<Hello lastName="Smith" middleName="Bob" 
  firstName="John" 
/>
<Hello lastName="Smith" 
  middleName="Bob"  firstName="John" 
/>

The following patterns are not considered warnings (edited):

<Hello firstName="John" />;
<Hello lastName="Smith" firstName="John" />;
<Hello 
  lastName="Smith" 
  middleName="Bob" 
  firstName="John" 
/>

Currently, the only option I have is to have the react/jsx-first-prop-new-line set to never, alongside react/jsx-max-props-per-line set to a maximum of one. It doesn't seem this provides me with any nice way to say that I allow maximum number of props in the first line (2), but anything exceeding that (regardless of whether it's a multi-line or not) should have a maximum of 1 prop per line.

In essence I'd like something that gives me the following:

1) If single-line tag, maximum of 2 props
2) If multi-line tag, if total props is 2, combine into one line
3) If multi-line tag, and total props is 3 or more, have one prop per line

Does anyone know how I solve this? edit: typo edit2: clarity

[ljharb]

This should always be a warning in any configuration:

<Hello lastName="Smith" 
 middleName="Bob" 
 firstName="John" 
/>

In other words, either they're all single line, or all multiline. I can't conceive of why it would be acceptable.

[NoPhaseNoKill]

I want to be able to set a default maximum of all on one line (2), and anything past that I want multiline. So no, they're not the same thing.

This is what I meant:

<Hello lastName="Smith" 
       middleName="Bob" 
       firstName="John" 
/>

[ljharb]

Right; I'm having trouble understanding why that's not a terrible and unreadable style, i guess.

[NoPhaseNoKill]

Because for two total props it looks nicer IMO to be on one line. For anything above that, having props on separate lines looks nicer.

[ljharb]

I agree with that; but in the multiline case, why would having the first prop on the same line as the component name be acceptable?

[NoPhaseNoKill]

Sorry maybe there's a bit of confusion. That is the final style I want.

For this particular linting rule, the acceptable would be:

<Hello 
  lastName="Smith" 
  middleName="Bob" 
  firstName="John" 
/>

However, used in conjunction with:

'react/jsx-first-prop-new-line': [2, 'never'],

The end result would be:

<Hello lastName="Smith" 
       middleName="Bob" 
       firstName="John" 
/>

edit: typo

[NoPhaseNoKill]

I've now updated my original post to reflect this

[yay]

I'm interested in this too.

In our organization we have a rule where React keys must be specified in alphabetical order ('react/jsx-sort-props': [ 'error' ],). This makes a random prop show up on the same line as the component's name, drawing unwarranted attention to itself.

For example:

<MyComp key='6'
  other='qwerty'>
</MyComp>

<MyComp action={func}
  key='6'>
</MyComp>

<MyComp otherProp='fred'
   reason='404' />
</MyComp>

Expected style:

<MyComp
  key='6'
  other='qwerty'>
</MyComp>

<MyComp
  action={func}
  key='6'>
</MyComp>

<MyComp
   otherProp='fred'
   reason='404' />
</MyComp>

This way it's easier to focus just on the component tree structure, without drawing unnecessary attention to the first prop.