New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is there any way to multiline all JSX props if there are more than X props on element? #2735
Comments
I think a reasonable thing to add to "react/jsx-props-multiline": ["error", {
"maximum": {
"single": 2,
"multi": 1
},
"when": "always"
}], which would, for single-line tags, error on 3+ props, and for multiline tags, error on 2+ props. This object form of "maximum" would only make sense when Thoughts? |
I think this is a duplicate of #2598. Regarding the implementation how about if instead of an object we defined two new properties: "react/jsx-props-multiline": ["error", {
"maxSingular": 2,
"maxMulti": 1,
"when": "always"
}], We deprecate |
What’s the advantage to having the object be flat? |
We would avoid a breaking change in the next version and it would be easier to validate. We won't have to evaluate for the const maximum = (config && config.maximum) || {}`.
const singular = maximum.singular || defaultSingular
const multi = maximum.multi || defaultMulti If we already have the const singular = config.maxSingular || defaultSingular
const multi = config.maxMulti || defaultMulti |
What would be a breaking change? We'd support both a number, or an object, under I'm more concerned with the cleanliness of the config than with using 2 vs 3 lines in the rule :-) |
Oh sorry. Did not get the part that both would be supported. Awesome. In favor of |
is anybody working on this? If not, I can give this a shot... |
Go for it 👍🏼 |
@iiison what would "single" or "multi" refer to that wasn't pretty obviously "lines"? |
well, it is. It didn't make sense to me in the first look. Maybe it's just me. I will keep |
@ljharb I have a small confusion(it may sound obvious), say this is the config for the rule: "react/jsx-props-multiline": ["error", {
"maximum": {
"single": 2,
"multi": 1
},
"when": "always"
}] And this is user's code: <App foo bar baz demo val /> As this is a single line tag, the rule will throw an error by asking to put 2 props per line to make it look like: <App
foo bar
baz demo
val
/> But now, if you run the linter again, it with throw the error again to put 1 prop per row, as it's a multi-line tag now. I see 2 ways to tackle this situation, a) To check the code for multi-line tag rule once the single line tag rule is completed. b) To make the user provide only one rule, either single or multi. Please let me know if this makes sense. |
I believe eslint already does multiple passes on the command line in order to ensure that no further autofixes are needed. However, it would be ideal for the rule to suggest the correct fix in the first place (ie, your option "a" there). |
Okay, few things about the option "a":
"react/jsx-props-multiline": ["error", {
"maximum": {
"single": 1,
"multi": 2
},
"when": "always"
}] And this the code: <App foo bar /> In this case, Though I completely understand these configs don't make much sense, but it's a possible option. One solution could be to mandate the user to keep Let me know what you think 😊 |
In that case @iiison the rule would ask to put the props in one line but not in the initial line. With the config you are describing and the example code the valid version would be: <App
foo bar
/> |
Sounds like a good idea to me! Let me start the implementation then 😊 |
I think that there is certainly a possibility of conflict if some folks want single > multi, and others want multi > single. I think we can implement with this plan, and if folks want to flip the priority, we can add another config option (that defaults to single > multi) that can be set to |
If we evaluate based on the start and ending line of the component we might avoid any conflicts. For example, for single line declarations: <App foo bar /> there is no need to run the multiline code. It will ask if the number of props is greater than And for multiline declarations: <App
foo fooz
bar baz
/> there is no need to run the single line code. It will ask if the number of props per line is greater than That way we can avoid adding another config option to the rule. |
yep, we wouldn't stumble upon the single-multi issue if we start the props from new line. But, say, user doesn't run <App foo
fooz
bar baz
/> should we show error in this case? |
The priority is to make sure the tests are good, it's not all that important what the implementation is as long as it passes them :-) |
…g for single and multi line tags. Fixes jsx-eslint#2735
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Fixed by #3078. |
Hello, I want to achieve a behavior when JSX props will all be multiline if amount of props is more than defined value. Currently there is
react/jsx-max-props-per-line
that is the closest to what I need, but if I set itsmaximum
to 2, it groups props in multiple lines grouped by 2. So this JSX:Will be formatted to this:
While I want to achieve this:
Is it possible to add a rule like
react/jsx-props-multiline
with attribute likeafter
with amount of props after which it should be multiline?The text was updated successfully, but these errors were encountered: