1. Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
2. Set Prettiers as Default formatter.

If above does not work:

ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter

This also work with ctrl+shift+I

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

Done!

After some searching, i found out that the following setting

"editor.formatOnSave": true

only works if:

• Code formatter is available.
• The files are NOT set to be saved after a delay.
• And the editor must not be shutting down.

I had set the prettier as the default formatter using the following setting:

"editor.defaultFormatter": "esbenp.prettier-vscode"

But I had set files to be saved automatically after a delay as specified in the following setting:

"files.autoSave": "afterDelay"

This setting was the cause of the problem in my case.

"files.autoSave" setting can have one of the following values:

• "off": A dirty editor is never automatically saved.
• "afterDelay": A dirty editor is automatically saved after the configured files.autoSaveDelay.
• "onFocusChange": A dirty editor is automatically saved when the editor loses focus.
• "onWindowChange": A dirty editor is automatically saved when the window loses focus.

Setting "files.autoSave" to any possible value other than "afterDelay" will fix the issue. I solved this issue by setting "files.autoSave" to "onFocusChange".

TO START:

Its helpful to know which "settings.json" your configuring. You need to make sure that both your workspace ".vscode/settings.json" file, and your user "settings.json" file (path is contingent on the O.S. your running) are configured to work harmoniously, and that one is not overriding the other with the same configuration twice.

SECONDLY

Remove all configurations you added to your "./settings.json" file for prettier. Those settings were added by the extension author. Despite the esbenp.prettier-vscode being the official prettier extension for VS Code, Prettier was never intended to be configured via VS Code's configuration files. Prettier is very nit-picky about its "./.prettierrc" configuration file. When we use the VS Code config ("settings.json") when attempt to use a prettier config that the extension generates somewhere. If you end up with settings in some project workspace vscode configurations (e.g. ".vscode/settings.json" files) the extension will try to regenerate a file each time one loads a prettier setting. It may even try to load multiple, depending on the scope of your settings.json file. Some how it has to handle that the user-scoped settings.json file should always be overriden by a workspace "settings.json" configuration file. That's not to mention that prettier configs often contain there own overridden rule sets within the ".prettierrc" configuration file.

• Note: Just FYI, the most problematic configuration your using is the "prettier.configPath" setting.

_I'm going to stop going down the rabbit hole, hopefully you get the point I am making, which is: Don't use VS Code settings.json configuration files to configure "Prettier".

This will be more easy to explain with a bullet-list

The following will help you configure a clean environment, one where Prettier will work as you have configure it to work.

To start...

1. ...delete all Prettier settings that you added to all settings.json files. This includes any Prettier settings you added to project ".vscode/settings.json" files, and it especially includes all Prettier-settings that you added to your user "settings.json" file. After you finish, reload VS Code, by closing it out completely, and reopening it.

2. Rather than delete all prettier configuration files from any projects you have open, I am going to instead ask that when you reopen VS Code, that you only open one instance of VS Code. If VS Code opens a project (aka project-folder) after restarting, you're going to want to close that project w/o opening another one. To do that you can...
   • Use the keybinding ALT + K followed by the F key.
   • Alternatively you can use the title-bar menu like so: FILE  >>  CLOSE FOLDER

Additionally, make sure all tabs are closed as well.

3. At this point your instance of VS Code should be totally empty, completely a blank canvas. From here you are going to want to create a new file. To do this...

   • You have one of two options

     • (A) You can use the keybinding CTRL + ALT + SUPER + N
     • (B) Another way to achieve the same thing is to use the title-bar menu like so:   FILE  >>  NEW FILE

   • Once you've prompted VS Code to create a new file VS Code will want you to pick a location where it's to be created at. The location doesn't matter, so long as it is in a completely empty file, with nothing else in it. To name the file, VS Code will probably use the drop-down that is often refereed to as the quick input menu. The file needs to be a JavaScript file, as a consequence, the file must end with the file extension ".js". So I can reference the file later, I will call mine "main.js", but you can call your whatever you want, so long as you know which file I am referencing when you read "main.js".

   • In the same folder as "main.js", create one more new file without a file extension. This file MUST HAVE THE NAME...

   • .prettierrc

NOTE: "The file has a period (or dot) as the first character in its name (this makes it a hidden file)."

4. Add the following prettier configuration to the ".prettierrc" file you just created.

Copy{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

5. **Execute the following commands"

   1. Copy $ npm init
      

      • The command will ask a bunch of questions, just press enter for each one to quickly configure the environment with the default npm/Node.js configuration.
      • The purpose of this is simply to create a valid "package.json" file.

   2. Copy   $ sudo npm i -g prettier && npm i -D prettier
      
         // Or you can execute it as two commands, like this:
      
         $ sudo npm i -g prettier
         $ npm i -D prettier
      

      • The command (or commands, depending on how you enter them) install prettier as a project dependency, and as a global Node.js package.

NOTE: "Make sure that you have prettier installed as a vscode extension. And make sure that you have only one prettier extension. Having multiple can create problems and confusion. The one you should have should have the Extension ID: esbenp.prettier-vscode "

6. Prettier Should work now. Use the main.js file we created early to write some javascript, then press F1 to open the quick input, type the word "format document", until you see the option "Format Document", which you want to click. Then choose prettier from the menu. Prettier won't format if you have erroneous code, it needs to be free from error. (if you want to fix errors use a linter like ESLint).

You can add a bunch of blank lines, or put braces on the wrong line, leave out semi colons, and prettier should format all of those mistakes.