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

原文由 slideshowp2 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如您所注意到的，Beautify 扩展是这里的根本原因（请参阅 此问题）。该扩展提供了一个文档格式化程序，当您运行 format 命令时 VSCode 将运行该文件格式化程序

几个选项：

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

原文由 Matt Bierner 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 W.Leto 发布，翻译遵循 CC BY-SA 4.0 许可协议