Proposal: Add JSX-specific overrides to `no-extra-parens`

In order to accommodate best practices established in the JSX world, the rule no-extra-parens needs to be modified to optionally ignore JSX components - the general standard is to wrap at least multiline JSX components in parens. However, this conflicts with the best practices in JavaScript in general where extra parens around expressions are discouraged.

What rule do you want to change?

no-extra-parens

Does this change cause the rule to produce more or fewer warnings?

Neither - the default setting should not cause more or fewer warnings to appear. However, this proposal will allow users to reduce some warnings when working with JSX components.

How will the change be implemented? (New option, new default behavior, etc.)?

New option: ignoreJSX with possible values:

• all: All JSX components are excluded from this rule
• multiline: All multiline JSX components are excluded from this rule
• single-line: All single-line JSX components are excluded from this rule

The default behaviour for this exception will be to to disallow extra parens around any JSX components, just as it is currently implemented.

Please provide some example code that this change will affect:

/* eslint no-extra-parens: ["error", "all", { "ignoreJSX": "all" }] */
// Ok - JSX components are excluded from this rule
const Component = (<div />)
const Component = <div />
const Component = (
  <div>
    <p />
  </div>
)
const Component = 
  <div>
    <p />
  </div>

/* eslint no-extra-parens: ["error", "all", { "ignoreJSX": "multiline" }] */
// Ok (extra parens not allowed)
const Component = <div />
// Ok (multiline JSX components are excluded from this rule)
const Component = (
  <div>
    <p />
  </div>
)
const Component = 
  <div>
    <p />
  </div>
// Warns (extra parens not allowed)
const Component = (<div />)

/* eslint no-extra-parens: ["error", "all", { "ignoreJSX": "single-line" }] */
// Ok (single-line JSX components are excluded from this rule)
const Component = <div />
const Component = (<div />)
// Ok (extra parens not allowed)
const Component = 
  <div>
    <p />
  </div>
// Warns (extra parens not allowed)
const Component = (
  <div>
    <p />
  </div>
)

What does the rule currently do for this code?

The rule currently flags all cases where a JSX component is wrapped in parens. The general best practice, however, is to wrap at least multiline JSX components in parens, for better readability.

What will the rule do after it’s changed?

The rule will allow developers to optionally turn this rule off for JSX components (single-line, multiline or all). The default setting will be to treat parens around JSX components just like any other expression - it will warn if JSX components are wrapped in parens.

See also original discussion in #7350.

/cc @platinumazure @ljharb

[robertrossmann]

Yes, already working on this! 🎉 I actually have it ready now, only documentation remains to be updated. I will open a PR later today.

[kaicataldo]

I’ll champion this