为什么jsx代码格式不正确 [英] Why does jsx code formatting not correctly

问题描述

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

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

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

return 
{标题} <小班名 = {style.panelSubTitle} >{字幕} </小></h3></div>

显然，这是不正确的.

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

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

-- 更新 --

抱歉.我检查了我安装的扩展，找到了 Beautify 扩展.但是为什么我使用 vscode 代码格式，它使用 Beautify?

解决方案

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

几个选项:

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

vscode is my favorite editor, I have a code formatting problem with it. Here is my jsx code:

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

when I use option + shift + F to format it, it gives me this:

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

Obviously, it's not correct.

vscode version - v1.10.2, and not install any code formatting extension.

So, I don't want to install any code formatting extension, is there any config for vscode to doing this correctly?

-- update --

Sorry about that. I check my extensions installed, found Beautify extension. But why the i use vscode code formatting, it use Beautify?

解决方案

As you note, the Beautify extension is the root cause here (see this issue). That extension provides a document formatter that VSCode will run when you run the format command

A few options:

• Disable the extension
• Disable Beautify for just js files by removing the js entry from the "beautify.language" setting
• Make sure your file has a language mode of javascriptreact. I believe this will prevent Beautify from running on the file

这篇关于为什么jsx代码格式不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！