为什么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>

当我使用option+ 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扩展是这里的根本原因(请参阅此问题).该扩展提供了一个文档格式化程序,VSCode将在您运行format命令时运行

一些选择:

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

Answer 2

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

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

Answer 3

这是因为 vs code 将.js文件的语言识别为“JavaScript”而不是“JavaScript React”，并且 beautify 使用 vs code 所说的语言来决定如何格式化它。

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

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

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

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

如果您不确定如何访问此文件，请查看用户和工作区设置。

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

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

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

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

确保你有两个

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

打字稿也是一样。确保您同时拥有typescript并typescriptreact启用上述功能。