ESLint，如何在 JSX 中去除花括号？答案

【问题标题】：ESLint, how to lint curly braces within JSX?ESLint，如何在 JSX 中去除花括号？
【发布时间】：2018-05-11 21:58:45
【问题描述】：

我目前正在使用 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 实现这一点？

【问题讨论】：

标签： reactjs jsx eslint

【解决方案1】：

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

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

【讨论】：

谢谢，不知何故错过了文档的儿童部分！ FWIW 我最终得到了"react/jsx-curly-spacing": [2, {"when": "always", "attributes": {"allowMultiline": false}, "children": true}]