-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Rule proposal: require parens around jsx that lives on its own line #1207
Comments
I'd love to add this to the airbnb config, since this is precisely what our style guide requires. I feel like this might be better as an option to |
I agree that it belongs in |
There's four existing syntaxes: declaration, assignment, return, arrow - this could be a fifth. Maybe |
Upon a bit deeper inspection, it looks like the rule doesn't enforce parenthesis on newlines even on multiline expressions. Ex:
Is considered valid, even though I would prefer the linter force it to be:
I am wondering if this may require 2 changes:
|
Those two changes sound good. |
I think this is likely related: running const MediaName = ({ name }: MediaNameProps) =>
<Media
queries={{
xs: {
minWidth: '24em',
},
sm: {
minWidth: '45em',
},
}}
>
{({ sm }) =>
<div>
{name}
</div>
}
</Media>; results in const MediaName = ({ name }: MediaNameProps) =>
(<Media
queries={{
xs: {
minWidth: '24em',
},
sm: {
minWidth: '45em',
},
}}
>
{({ sm }) =>
(<div>
{name}
</div>)
}
</Media>); when I would expect const MediaName = ({ name }: MediaNameProps) => (
<Media
queries={{
xs: {
minWidth: '24em',
},
sm: {
minWidth: '45em',
},
}}
>
{({ sm }) => (
<div>
{name}
</div>
)}
</Media>
); is this the responsibility of this rule? |
I would also expect the latter. Which rule is warning on it if you omit --fix? |
While looking into: #1282 - I also ran into some of the issues mentioned above. When fixing the following: {myCondition &&
<div>
<p>Hello World</p>
</div>
} The current auto fixer would return: {myCondition &&
(<div>
<p>Hello World</p>
</div>)
} Which IMHO looks rather ugly. And I could not find any other ESLint rule that would format this into what we want (see below). I did manage to write the fixer in a way that it returns this for this specific case, but the code is quite fragile and probably would need a good set of unit tests to confirm it works correctly in all cases. {myCondition && (
<div>
<p>Hello World</p>
</div>
)} My initial fixer implementation: function(fixer) {
const rightNode = node.expression.right;
return [
fixer.insertTextAfterRange(sourceCode.getTokenBefore(rightNode).range, ' ('),
fixer.insertTextBeforeRange(sourceCode.getLastToken(node).range, ')')
];
} So in addition to the above ticket and the points mentioned in here, I think it's needed to take a deeper look into this rule and see if it can be made more useful! |
Is someone working on this? Because we use prettier-eslint all of our codebase is now with ugly braces |
There's a PR for it. |
#1285 ? |
It seems like #1475 covers this. |
The title is not very eloquent, so I'll explain what I'm after by example.
Currently you can only require parens around multiline jsx. I'd also like to require parens around single-line jsx, but only when it lives on its own line. This is particularly useful when within an arrow function.
For example, the following would raise an error:
As would this:
The following would not raise errors:
The text was updated successfully, but these errors were encountered: