Javascript: no-extra-parens delegates ignoreJSX option to jsx-wrap-multilines, but lacks feature parity

[polarathene]

I was looking at the ESLint rule no-extra-parens, and this allows for excluding unnecessary parens for single line returns of JSX. The airbnb config has a comment referencing eslint-plugin-react, but no specific rule.

https://github.com/airbnb/javascript/blob/06b3ab11d9a443ff46f052dd00375e271e5146e6/packages/eslint-config-airbnb-base/rules/errors.js#L71

I assume the delegated rule is react/jsx-wrap-multilines?:

"react/jsx-wrap-multilines": ["error", { return: "parens-new-line" }],

Neither the parens or parens-new-line options actually allow for requiring the parens only for multi-line return of JSX, and avoiding parens for single line(Prettier does this for example). For ESLint's rule, this can be done with:

"no-extra-parens": ["error", "all", { ignoreJSX: "multi-line" }],

There doesn't appear to be a mention of the rule on the main javascript guide, but the airbnb react guide does specifically mention using parentheses for multi-line return of JSX, no enforcement of no parens on single line return?

The no-extra-parens rule is presently disabled, but perhaps that comment for ignoreJSX is a bit misleading at present.

[polarathene]

Found a mention/example of what "good" is for single line return of JSX(no parentheses):

// good, when single line
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

[ljharb]

If there's a gap between eslint core and eslint-plugin-react, please file an issue or a PR to add that functionality to eslint-plugin-react.

Since the important bit in this repo is the guide - the eslint config is just a convenient way to programmatically enforce some of the guide - there's nothing actionable here.

[polarathene]

If there's a gap between eslint core and eslint-plugin-react, please file an issue or a PR to add that functionality to eslint-plugin-react.

I had already done that. It is visible prior to your comment, You replied to it after commenting / closing here.

Issue was that the referenced line in this projects eslint rules, has a comment referring to the react plugin, but not mentioning what rule. The only rule I could find was about multi-line parens, whereas no-extra-parens rule also handles single line.

There is something actionable here, in that the rule could be changed from ignore to multi-line, it would then reflect the guide linked and quoted previously. Otherwise, the equivalent support needs to arrive in the react plugin and the comment should identify the related rule(Issue raised already as mentioned).

[ljharb]

The problem is that eslint core's jsx handling is buggy and inconsistent - so it's critical to delegate all jsx control to eslint-plugin-react.

I'm happy to see the commenting improved, and/or to improve the react plugin.