jsx-first-prop-new-line: add multiline-multiprop option #883
Conversation
| <Hello | ||
| foo={{ | ||
| }} | ||
| bar /> |
There was a problem hiding this comment.
I think you have a typo here
There was a problem hiding this comment.
It is, but on the next line we see /> again.
| @@ -7,7 +7,8 @@ Ensure correct position of the first property. | |||
| This rule checks whether the first property of all JSX elements is correctly placed. There are three possible configurations: | |||
| * `always`: The first property should always be placed on a new line. | |||
| * `never` : The first property should never be placed on a new line, e.g. should always be on the same line as the Component opening tag. | |||
| * `multiline`: The first property should always be placed on a new line when the properties are spread over multiple lines. | |||
| * `multiline`: The first property should always be placed on a new line when the jsx tag takes up multiple lines. | |||
There was a problem hiding this comment.
JSX should be capitalized here and the next line
| @@ -58,6 +59,11 @@ The following patterns are considered warnings when configured `"multiline"`: | |||
| prop /> | |||
| ``` | |||
|
|
|||
| ```js | |||
There was a problem hiding this comment.
It would be ideal if these used jsx for syntax highlighting instead of just js
| ].join('\n'), | ||
| options: ['multiline-multiprop'], | ||
| errors: [{message: 'Property should be placed on a new line'}], | ||
| parser: parserOptions |
This new option is similar to `multiline`, but it will only enforce a new line if the tag spans multiple lines *and* are more than 1 prop. Also, clear up the language in the docs for the `multiline` option. We are checking that the tag spans multiple lines. This does not imply there are multiple props (1 prop can span multiple lines).
kentor
force-pushed
the
jsx-first-prop-new-line-updates
branch
from
a09139f to
d2d6d7f
Compare
| The following patterns are not considered warnings when configured `"multiline-multiprop"`: | ||
|
|
||
| ```jsx | ||
| <Hello foo={{ |
There was a problem hiding this comment.
wait, why is this not a warning? The JSX tag is spanning multiple lines, so it should look like:
<Hello
foo={{
…
}}
/>There was a problem hiding this comment.
That would be handled by the existing multiline option. This is the multiline-multiprop option which does not warn because there is only 1 prop, but would if there are >= 2 props
I wanted this option to allow something like this:
<Hello style={{
'background': 'black',
}} />but not
<Hello style={{
'background': 'black',
}} secondProp />to fix the second case one would do (at a minimum):
<Hello
style={{
'background': 'black',
}} secondProp />if the jsx-max-props-per-line rule is also enforced, then one would additionally have to move secondProp to its own line
<Hello
style={{
'background': 'black',
}}
secondProp
/>There was a problem hiding this comment.
hmm, i misunderstood the purpose of this option - it seems like Airbnb's config already matches multiline, and we wouldn't use this particular option.
This thus seems like it does match what you're looking for.
|
Would love this to happen. The current multiline looks very messy with a single attribute and multiline attribute values 👍 |
addresses another part of #878