jsx-curly-spacing should support "consistent" option

[kaiyoma]

Similar to how other eslint rules provide a "consistent" option for square brackets, curly braces, and parens, there should be a similar option for the curly braces in JSX. Basically, the absence or presence of a newline after the opening curly brace should be matched at the closing curly brace.

[ljharb]

Can you provide some code samples that it should warn on, and what it would autofix to?

[kaiyoma]

No newlines at either end is good:

  <div>
    {data.message ? <span>You have an unread message</span> : <Placeholder/>}
  </div>

Newlines at both ends is also good:

  <div>
    {
      data.message ?
        <span>You have an unread message</span> :
        <Placeholder/>
    }
  </div>

But mixing and matching is bad:

  <div>
    {
      data.message ?
        <span>You have an unread message</span> :
        <Placeholder/>}
  </div>

  <div>
    {data.message ?
        <span>You have an unread message</span> :
        <Placeholder/>
    }
  </div>

Related eslint rules that support "consistent":

• https://eslint.org/docs/rules/array-bracket-newline
• https://eslint.org/docs/rules/function-paren-newline
• https://eslint.org/docs/rules/object-curly-newline

[ljharb]

Sounds like a great addition! The airbnb config would use this option.

[kamronbatman]

Definitely need this.

There is also no rule to enforce a newline if the JSX curly brace block is multiline. Optionally I would not mind a rule that enforces curly brace blocks to be on their own lines too (the second example would be changed to Bad).

Bad:

<MyTag>{ conditional ?
  true :
  false  }
</MyTag>

Good:

<MyTag>{
  conditional ?
   true :
   false
}</MyTag>

Good:

<MyTag>
  {
    conditional ?
     true :
     false
  }
</MyTag>

Not sure if it is possible, but inheriting the config settings from object-curly-newline is fine with me.

[ljharb]

The third example is the one I'd want.

[kamronbatman]

I agree with you @ljharb. Currently I cannot enforce that with eslint-plugin-react. I can try and find some time to do a dirty addition, but I am not familiar with writing eslint rules. It might go faster with someone else who is more familiar.

[viktor-equinix]

Is anybody found the way how to configure eslint for 3rd example above?

[kamronbatman]

This rule effectively doesn't exist. :(

[JBallin]

Should also enforce consistent spacing around content.

BAD (missing space at end)
<h3>{ `Error: ${error}`}</h3>

GOOD (space before + after)
<h3>{ `Error: ${error}` }</h3>

GOOD? (no spaces before/after)
<h3>{`Error: ${error}`}</h3>

[ljharb]

A PR to implement this is most welcome.