VSCode 没有正确格式化 JSX答案

【问题标题】：VSCode does not format JSX CorrectlyVSCode 没有正确格式化 JSX
【发布时间】：2020-01-03 03:19:34
【问题描述】：

如果我有：

<Button
  onClick={ this.handleCreateFormOpen }
/>

然后我输入SHIFT + OPTION + F

然后我的 JSX 格式如下：

<Button
  onClick={this.handleCreateFormOpen}
/>

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

我是 Android 开发者，在 Android Studio 中我可以随意更改格式，在 VSCode 中是否有类似的选项？

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

【问题讨论】：

onClick={this.handleCreateFormOpen} 是 props 的标准格式。根据使用的格式化程序，您可能会看到带有对象文字的 { key: value }。
就像 Emile 所说，你所拥有的是正确的格式。
但我不希望这样。我是 Android Dev 并且在 Android Studio 中我可以根据自己的选择更改格式，在 VSCode 中没有类似的东西吗？我希望能够输入 SHIFT + OPTION + F 和 VSCode 格式化我的代码，如 onClick={ this.handleCreate } 这可能吗？
这是一个有效的问题，请投票

【解决方案1】：

您应该将空格规则添加到您的 eslint 配置中。

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

space-in-brackets：在对象字面量的大括号和数组字面量的括号内强制保持一致的间距

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

<Button
   onClick={this.handleCreateFormOpen}
/>

带有“always”选项的这条规则的正确代码示例：

<Button
  onClick={ this.handleCreateFormOpen }
/>

【讨论】：