jsx-eslint/eslint-plugin-react
View on GitHubAdd flag to react/jsx-max-props-per-line's 'when'
Open
#2598 opened on Mar 20, 2020
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