Proposal: Add exception option to `no-extra-parens` to allow parens around React components

The rule no-extra-parens currently flags parens around React components spanning multiple lines:

const component = (
  <div>
    <h1>Hello world</h1>
  </div>
)

However, some believe that wrapping multiline React components is the preferred way to write them to increase readability.

Proposal

Introduce a new exception option to this rule, reactComponents (or just react for brevity) which, when set to false, would not flag React components wrapped in parens as issues.

ESLint: 3.7.1 Parser: babel-eslint no-extra-parens configuration:

{ 'no-extra-parens': [1, 'all', {
    nestedBinaryExpressions: false
  }]
}

[platinumazure]

I think I can get behind JSX options (including multi-line vs single-line). JSX can at least be represented as a syntactical construct, rather than being React-specific.

Can someone draft a proposal (see Rule Change guidelines) and ping me when that’s done so I can try to get the team to review?

[ljharb]

This would be great, as it’s blocking Airbnb’s config from enabling no-extra-parens - precisely because our guide requires that multiline JSX be paren-wrapped.

However, it also allows single-line JSX to be paren-wrapped, which means multiline wouldn’t suffice for our use case (@platinumazure)