Why does jsx code formatting not correctly

Question

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?

question from:https://stackoverflow.com/questions/42920590/why-does-jsx-code-formatting-not-correctly

Answer 1

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