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

当我使用选项shiftF格式化它时，它给出了以下信息：

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

显然，这是不正确的。

vscodeversion-v1.10.2，并且不安装任何代码格式扩展。

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

--更新--

抱歉。我检查了我的扩展安装，找到了美化扩展。但是为什么我使用vscode代码格式，它使用美化？

Answer 1

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

"prettier.jsxBracketSameLine": true

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

Answer 2

选择右下角的语言作为“脚本反应”。

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

Answer 3

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

几个选项:

< li >禁用扩展功能 < li >通过从< code >“美化.语言”设置中删除< code>js条目，仅对js文件禁用美化功能 < li >确保您的文件具有< code>javascriptreact语言模式。我相信这将防止美化运行在文件上