Eslint-plugin-react: 'react/jsx-wrap-multilines' behaves strange

[SidKwok]

The rule tells me that this is good:

var hello = (
    <div>
      <p>Hello</p>
    </div>
)

but this is also accepted:

var hello = (<div>
  <p>Hello</p>
</div>)

'react/jsx-wrap-multilines': 'error'

Did I miss something?

[ljharb]

Nope. Both of your examples are allowed, but the docs only mention the first one, since it's generally preferred (and more readable) than the second.

[SidKwok]

How can I enforce the first format?

[ljharb]

It sounds like we'd need another possible value for the three syntaxes: instead of true/false, we'd want an enum of ignore/parens/parens-separate-lines (or some better name for the last option).

[SidKwok]

That will be a good feature for this rule.

[lukemwillis]

@ljharb It looks like these options are supported in master now, but in v7.4.0, I get errors. This is my rule:

"react/jsx-wrap-multilines": ["error", { 
    "declaration": "parens-new-line", 
    "assignment": "parens-new-line", 
    "return": "parens-new-line", 
    "arrow": "parens-new-line", 
    "condition": "parens-new-line", 
    "logical": "parens-new-line", 
    "prop": "parens-new-line"
}]

Which gives me the error:

Error: .eslintrc:
Configuration for rule "react/jsx-wrap-multilines" is invalid:
Value "[object Object]" should NOT have additional properties.

If I remove the rules for condition, logical, and prop, then I get the error:

Error: .eslintrc:
Configuration for rule "react/jsx-wrap-multilines" is invalid:
Value "parens-new-line" should be boolean.

Are the changes to this rule in v7.4.0? Or are they slated for a future release?

[ljharb]

Slated for a future release.

[dfsq]

Are there plans to make a release in near future? This rule is important.

[vzaidman]

Also, I'd like to specify default behavior:

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

or

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

And this rule is very importnat i hope it is updated soon.

[ljharb]

I believe this has been released.

[mqklin]

@ljharb can't find it in NPM (last release 2 month ago)

[ljharb]

Can someone restate, in the latest version, exactly what’s not working as desired here? (Not about changing the defaults, just about an impossible configuration that you need)

[mqklin]

If I use the parens-new-line rule, I'm able to write 2 ways:

{showSpinner && (
  <Spinner
    color="red"
  />
)}

And

{showSpinner && 
  (
    <Spinner
      color="red"
    />
  )
}

--fix rule fixes it to the second one, which is not I want. Is there is a possibility to fix only to the first one?

[ljharb]

That sounds like something worth doing.