[New] jsx-first-prop-new-line: add multiprop option

[haydncomley]

The jsx-first-prop-new-line rule is great but it just falls short in one place for me. This addition allows the rule to enforce a new line, but only if there are multiple props, else it forces it inline - a hybrid between multiline and multiline-multiprop.

Before Linting (currently the div element thinks that it is valid, but I want it to throw a linting error)

After Linting (the div is automatically formatted to put the prop on the first line, but the component below is kept multiline)

(I hope I've formatted this okay as I couldn't find a template for PRs)

[codecov]

Codecov Report

Merging #3533 (45184ef) into master (3ab81d2) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #3533   +/-   ##
=======================================
  Coverage   97.60%   97.60%           
=======================================
  Files         132      132           
  Lines        9282     9285    +3     
  Branches     3392     3395    +3     
=======================================
+ Hits         9060     9063    +3     
  Misses        222      222           

Impacted Files	Coverage Δ
lib/rules/jsx-first-prop-new-line.js	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[ljharb]

So, just to clarify, this is multiline-multiprop but with an additional restriction that only multi prop elements may be multiline?

[haydncomley]

So, just to clarify, this is multiline-multiprop but with an additional restriction that only multi prop elements may be multiline?

Yes indeed 🙂 - so it will force multiline for multiple props only, or force single line for up to 1 prop.

[sanketnaik99]

@ljharb Is there an ETA on when this will be released?

[mindnektar]

@ljharb just spent some time debugging why i couldn't use this even though it's in the docs. guess i found the answer. i'd love to use this option, so i've got the same question: when is the next release? :)

[mindnektar]

by the way: what if the prop itself is multiline? i would like to enforce something like this in such cases:

<div
    className={classnames(
        'foo',
        { 'foo--bar': props.bar }
    )}
>
    ...
</div>

right now, the multiprop option would cause this:

<div className={classnames(
    'foo,
    { 'foo--bar': props.bar }
)}
>

[ljharb]

@mindnektar everywhere on github, you have to look at the docs on the tagged release and not on the default branch. For your other question, you'd combine it with the jsx-indent and indent rules.

@sanketnaik99 no, there is no ETA. hopefully soon.