How to use beautify for Javascript/React?

Question

I have installed Beautify to use it for my ReactJS code. However, it apparently does not properly beautify the HTML format in the file.

For example, it turns this:

into this:

Among all the options, which option should I use to fix this ?

Answer 1

Just change language mode javascript to javascript react [temporary]

VSCode Command: (Ctrl + KM)

Or Save file in .jsx format and change the settings.json file

"files.associations": {
    "*.jsx": "javascriptreact"
}

Answer 2

I used to have the same problem. Apparently beautify doesn't support JSX. I uninstalled and instead of it, I installed Prettier, it works great for me.

Hope I helped you.

Answer 3

For those still struggling with this, there is also js-beautify's -X (--e4x) option which tells it to leave the XML content unchanged.