如何在 Visual Studio 代码中格式化 React 代码？

Question

在 VSCode 中自动格式化 React 代码时会出错。我正在使用更漂亮的扩展。那么为此设置格式的最佳代码是什么？

Answer 1

Prettier 正是您所需要的。如果你想要个性化的格式化代码jsx，你可以根据自己的风格配置prettier

Answer 2

使用vscode内部react格式化程序，非常好:

您可以找到 React 和 TypeScript React 代码格式化程序：

Answer 3

终于，我找到了一种方法。在 vscode 设置中，我必须将默认格式更改为更漂亮。

除了项目之外，还需要创建一个具有适合项目配置的 .prettierrc 文件。

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

如果你不需要它，你总是可以在没有 .prettierrc 文件的情况下启用格式化代码。