VSCode 没有正确格式化 JSX

Question

如果我有：

<Button
  onClick={ this.handleCreateFormOpen }
/>

然后我输入 SHIFT + OPTION + F

然后我的 JSX 格式如下：

<Button
  onClick={this.handleCreateFormOpen}
/>

我想要这个：onClick={ this.handleCreateFormOpen }

我是 Android Dev，在 Android Studio 中，我可以根据自己的选择更改格式，VSCode 中是否有类似的选项？

我希望能够输入 SHIFT + OPTION + F 和 VSCode 将我的代码格式化为 onClick={ this.handleCreate } 而不是 onClick={this.handleCreateFormOpen} 这可能吗？

Answer 1

您应该将 space-in-brackets 规则添加到您的 eslint 配置中。

"space-in-brackets": ["error", "always"]

space-in-brackets: enforce consistent spacing inside braces of object literals and brackets of array literals

带有 "always" 选项的此规则的错误代码示例：

<Button
   onClick={this.handleCreateFormOpen}
/>

带有 "always" 选项的此规则的正确代码示例：

<Button
  onClick={ this.handleCreateFormOpen }
/>

VSCode does not format JSX Correctly