为什么jsx代码格式不正确

Question

vscode是我最喜欢的编辑器，我有一个代码格式化问题。这是我的jsx代码：

return <div className={panelHeadingClassName}>
    <h3 className={style.panelTitle}>
        <i className={iconStyle[iconClass]}></i>
        {title}
        <small className={style.panelSubTitle}>{subTitle}</small>
    </h3>
</div>

当我使用选项 + shift + F 进行格式化时，它给了我这个：

return <div className = {
  panelHeadingClassName
} >
<
h3 className = {
  style.panelTitle
} >
<
i className = {
  iconStyle[iconClass]
} > < /i> {
  title
} <
small className = {
  style.panelSubTitle
} > {
  subTitle
} < /small> <
/h3> <
/div>

显然，这不正确。

vscode版本 - v1.10.2，并且不安装任何代码格式扩展程序。

所以，我不想安装任何代码格式扩展程序，vscode是否有正确执行此操作的配置？

- 更新 -

很抱歉。我检查了我的扩展程序，找到Beautify扩展名。但为什么我使用vscode代码格式，它使用Beautify？

Answer 1

如您所知，Beautify扩展是这里的根本原因（参见this issue）。该扩展提供了一个文档格式化程序，VSCode将在您运行格式化命令

时运行

一些选择：

• 停用扩展程序
• 从js设置
中删除"beautify.language"条目，仅针对js文件禁用美化
• 确保您的文件的语言模式为javascriptreact。我相信这会阻止Beautify在文件上运行

Answer 2

在右下角选择语言为“ JavaScript React”。

更好的方法是将js文件重命名为jsx。

Answer 3

对于那些同时使用 .js 和 .jsx 的人，我是这样解决的。

进入VSCode中的settings，搜索settings.json，然后就可以打开settings.json文件了。

确保两者都有

"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

打字稿也是一样。确保您像上面一样启用 typescript 和 typescriptreact。

Answer 4

您需要选择默认的格式化程序。

1. 按 Ctrl+Shift+P(Win) 或 Cmd+Shift+P(Mac)
2. 输入格式文档...
3. 然后单击配置默认格式化程序...并从列表中选择它。

Answer 5

安装Prettier（如果未安装），并尝试将此用户或工作区设置添加：

"prettier.jsxBracketSameLine": true

不要在return和返回的JSX表达式之间放置换行符。触发自动形式（Alt + Shift + F），并检查是否有效。

Answer 6

或者可以使用rc-beautify vscode extension代替Beautify及其应采取的解决方法。安装CTRL + B以格式化JS，JSX代码。

Answer 7

您没有写文件名，如果它是一个“ .js”文件，请重命名为“ .jsx”

Answer 8

这是因为vs代码将.js文件的语言识别为“ JavaScript”而不是“ JavaScript React”，并且beautify使用了vs代码表示要决定其格式的语言。

根据其他答案的建议，您可以手动将语言（在vs代码的右下角）选择为“ JavaScript React”，或将每个文件扩展名重命名为.jsx，但我认为更容易添加：

"files.associations": {
    "*.js": "javascriptreact",
}

进入我的工作区 settings.json文件。

现在vs代码将在工作区中自动将所有.js文件的语言识别为“ JavaScript React”！

如果不确定如何获取此文件，请检查User and Workspace Settings。

编辑： 如果工作空间中的所有.js文件都是“ JavaScript React”，这将很有用！

Answer 9

如果您想对格式进行更多控制，prettier 也允许这样做。
在项目的根目录中创建一个名为 .prettierrc (dot prettierrc) 的文件，并根据需要添加配置。
例如，在 .prettierrc 文件中添加以下 JSON：

{
 "singleQuote": true,
 "trailingComma": "none"
}