为什么jsx代码格式化不正确

当我使用option+ shift+ F格式化它时,它给了我这个:

return 

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

显然,这是不正确的.

vscode版本 - v1.10.2,而不是安装任何代码格式扩展名.

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

- 更新 -

对于那个很抱歉.我检查我的扩展程序安装,找到Beautify扩展名.但为什么我使用vscode代码格式化,它使用Beautify？

如您所知,Beautify扩展是这里的根本原因(请参阅此问题).该扩展提供了一个文档格式化程序,VSCode将在您运行format命令时运行

一些选择:

禁用扩展程序

通过js从"beautify.language"设置中删除条目,仅对js文件禁用Beautify

确保您的文件的语言模式为Javascriptreact.我相信这会阻止Beautify在文件上运行

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

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

安装Prettier（如果未安装），然后尝试将其添加到您的用户或工作场所设置中：

"prettier.jsxBracketSameLine": true

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