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?

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