ESLint，如何在JSX中使用花边大括号？

Question

我目前正在使用react / jsx-curly-spacing在JSX中添加花括号之间的间距。这适用于道具，但不适用于其中的儿童。

例如，

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

应该成为

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

我试过了：

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

但这些都没有达到预期的效果。

如何使用ESLint实现此目的？

Answer 1

尝试将"children": true,添加到JSX元素的lint子项的设置中：

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