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

Posted 2023-02-21

技术标签:

【中文标题】ESLint，如何在 JSX 中去除花括号？【英文标题】：ESLint, how to lint curly braces within 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 实现这一点？

【问题讨论】：

【参考方案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]

以上是关于ESLint，如何在 JSX 中去除花括号？的主要内容，如果未能解决你的问题，请参考以下文章