jsx-eslint/eslint-plugin-react

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

Open

#2598 opened on Mar 20, 2020

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

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

Contributor guide