简体   繁体   中英

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?

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"}
}],

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM