Disallow parens around single-line JSX expressions

[feross]

This rule restricts the use of parentheses to only where they are necessary.

Currently, this rule is set to:

    "no-extra-parens": ["error", "functions"]

I would like to investigate enabling a few more of the restrictions. Specifically, requiring the following seems desirable:

const Component = (<div><p /></div>) // avoid

// ok
const Component = (
  <div>
    <p />
  </div>
)

http://eslint.org/docs/rules/no-extra-parens

[feross]

I attempted to set this rule to:

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

but I ran into some issues.

We really just want to add the JSX enforcement and no other new restrictions. Unfortunately, to get the JSX enforcement, we need to change the first parameter from "function" to "all". This also enables checking for extra parens around all kind of expressions, like:

obj.set(x, y, (z ? 25 : undefined))

And this is just too restrictive, IMO. I'll open an issue on ESLint about adding additional options so we can just enforce no extra parens around functions and single-line JSX statements.

[feross]

ESLint issue: eslint/eslint#8174

[feross]

The issue didn't reach consensus with the ESLint team (back in Jan 2018) so we can't fix this.

If someone feels strongly about this, I'd love it if you could please open a new issue with the ESLint team and reference the original one I opened (eslint/eslint#8174). It is possible that the new attempt will reach consensus with the team. If you open a new issue, lmk and I will re-open this issue.