jsx-wrap-multilines

[zorzysty]

In it's current version prettier is conflicting with jsx-wrap-multilines rule that is used by some of the most popular react style guides including Airbnb's.

const header = this.props.header
  ? (
	<HeaderElement
	  className="myclass myclass2"
	  isExpanded={this.state.isExpanded}
	>
	  {this.props.header}
	</HeaderElement>
  )
  : null;

outputs

const header = this.props.header
  ? <HeaderElement
      className="myclass myclass2"
      isExpanded={this.state.isExpanded}
    >
      {this.props.header}
    </HeaderElement>
  : null;

https://prettier.github.io/prettier/#%7B%22content%22%3A%22const%20header%20%3D%20this.props.header%5Cn%20%20%3F%20(%5Cn%5Ct%3CHeaderElement%5Cn%5Ct%20%20className%3D%5C%22myclass%20myclass2%5C%22%5Cn%5Ct%20%20isExpanded%3D%7Bthis.state.isExpanded%7D%5Cn%5Ct%3E%5Cn%5Ct%20%20%7Bthis.props.header%7D%5Cn%5Ct%3C%2FHeaderElement%3E%5Cn%20%20)%5Cn%20%20%3A%20null%3B%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Afalse%2C%22trailingComma%22%3A%22none%22%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2C%22parser%22%3A%22babylon%22%2C%22doc%22%3Afalse%7D%7D

[vjeux]

The reason why () are added is to prevent

return
  <div />;

from the semi-colon automatic insertion feature of js where it adds a ; after return. Then, because people see parenthesis added for return, they are thinking it's actually useful/needed for other places, but it's not the case.

It seems like adding parenthesis around ternaries is just adding noise and not actually useful.

[zorzysty]

@vjeux I agree with you. Those parentheses aren't useful in ternaries and prettier shouldn't be adding them by default.

The option would be nice to have since this rule is so popular, and its default settings are requiring parentheses for both returns and ternaries like in the example.

As a workaround, for those who are using Airbnb style guide and want to integrate prettier, I'd recommend adding this line to the rules:
"react/jsx-wrap-multilines": ["error", {"declaration": false, "assignment": false}],

[vjeux]

I'm going to close this one in order to concentrate all the ternary discussions in #737

[tunnckoCore]

@vjeux it's not only about ternaries..

following

const foo = ({ bar }) => <h1>Hello {bar}</h1>

is converted to

const foo = ({ bar }) =>
  (<h1>
    Hello {bar}
  </h1>)

current config of that rule

module.exports = {
  rules: {
    'react/jsx-wrap-multilines': [
      'error',
      { arrow: true, return: true, declaration: true }
    ]
  }
}

[vjeux]

@charlike prettier has never outputted that, it must be an eslint rule with autofix

[tunnckoCore]

Hm, probably, after couple of more tests it feels like that, because in some cases it work. Sorry ✋