CODEWITHSUNDEEP
reactjsjsxeslint
Tim Stone
Tim Stone

Reputation: 11

ESLint, how to lint curly braces within JSX?

I'm currently using react/jsx-curly-spacing to add spacing between curly braces within JSX. This works great for props but not for children within it.

For example,

<div>
    {this.renderSomething()}
</div>

Should become

<div>
    { this.renderSomething() }
</div>

I've tried:

"react/jsx-curly-spacing": [2, "always", {
  "allowMultiline": false,
  "spacing": {"objectLiterals": "always"}
}],
"object-curly-spacing": [2, "always"]

But neither of these have the desired outcome.

How do I achieve this using ESLint?

Upvotes: 1

Views: 1570

Answers (1)

Ross Allen
Ross Allen

Reputation: 44890

Try adding "children": true, to the setting to lint children of JSX elements:

"react/jsx-curly-spacing": [2, "always", {
  "allowMultiline": false,
  "children": true,
  "spacing": {"objectLiterals": "always"}
}],

Upvotes: 1

Related Questions