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:

Answer 1

This is because vs code is recognising the language of .js files as "JavaScript" not "JavaScript React" and beautify uses the language that vs code says it is to decide how to format it.

As suggested by other answers, you could manually select the language (in the bottom right corner of vs code) as "JavaScript React" or rename each file extension to .jsx but what I think is easier is to add:

"files.associations": {
    "*.js": "javascriptreact",
}

into my workspace settings.json file.

Now vs code will automatically recognise all .js files language as "JavaScript React" in the workspace!

If your unsure how to get to this file, check this out User and Workspace Settings.

Edit: This is useful if all the .js files in your workspace are "JavaScript React"!