Follow these steps:

1. CTRL + SHIFT + P
2. Format Document (in pop-up bar)
3. Select Format Document
4. Select Configure Default Formatter...
5. Select Prettier - Code formatter

To enable Format On Save

1. CTRL + SHIFT + P
2. Preferences Open Settings (UI) (in pop-up bar)
3. Type Format On Save
4. Enable Format On Save if it is not checked

Done!

In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar. I'm publishing it here for future reference since I didn't find any documentation on this topic.

In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React

You don't need to use plugin for that: Change Language Mode command (Ctrl + KM) offers JavaScript React option, what is basically JS with JSX support.

Native Format Document command (usually bound to Alt + Shift + F) then does the trick.

I have VS Code in Mac v1.8.1 and if you open a Folder with a .jsbeautifyrc you could override the properties, in your example if you create a folder with 2 files:

index.js

import {code} from 'source';
import {otherCode} from 'source';

.jsbeautifyrc

{
  "bracepadding": true
}

you will get the next result after run the beautifier:

import { code } from 'source';
import { otherCode } from 'source';

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.

It happened to me as well. You need to set the language syntax from "plain" javascript to "javascript react".

Look at the images below, you will need to click at the bottom status bar and change the syntax.

To update all your files in the project go to "user settings" or "workspace settings" depends if you want it to be set for the project or for your user.

Now look up:

  "files.associations": {},

and overide it and set something like this:

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

Finally, I have found a way to do it. In the vscode settings, I have to change to default format to prettier.

As well as on the project it is needed to create a .prettierrc file with suitable configurations for the project.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

And if you do not need it, you can always enable to format the code without the .prettierrc file.

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