If doing what @Simin Maleki mentioned does not solve it for you, there is a chance that your default formatter is not set:

File > Preferences > Settings > Search for "default formatter" 

Make sure your Editor: Default Formatter field is not null but rather esbenp.prettier-vscode and that all the languages below are ticked. This fixed my issue.

STEP BY STEP WALKTHROUGH

Also make sure that your format on save is enabled:

Sometimes, prettier stops working when there are syntactic errors in the code. You can view the errors by clicking on the x button on the bottom right corner beside Prettier

Prettier could also format your files on save.

However, installing and enabling does not result in working.

You have to check "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting

You only have to configure your Default Formatter and check the checkbox in Format On Save in the settings, after installing prettier to make it work. Don't mess with other configuration files.

1 - Select Default Formatter

1. Open Files -> Preferences -> Settings (or Ctrl + , in Windows).
2. Search for Editor: Default Formatter
3. Select your default formatter as Prettier - Code Formatter;

See the image below;

2 - Save On Format

1. Open Files -> Preferences -> Settings (or Ctrl + , in Windows).
2. Search for Editor: Format on Save
3. Click the check box under Format On Save;

See the image below;

disable and enable prettier extension solves my problem

I am not using Vue, but had the same problem.

I already had the settings

• Editor: default formatter to prettier
• Editor: Format on Save to true
• I already had .eslintrc.js and .prettierrc files But nothing worked.

The solution to my problem was that I had all set properly, except I needed to:

• Command + Shift + p
• type format document with
• select Configure Default Formatter...
• select Prettier as default.

I don't know why the Editor: Format on Save set to true was not enough. I needed to select default formatter using the above steps so it worked.

can you try to add this section to your VS Code settings.json file?

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},

I faced this problem and these three steps solved my problem:

you can still have issues in spite of all these settings. In this case, as pointed out in an earlier answer, then it would be a good point to check the prettier notification at bottom status bar in VSCode.

When clicking on that status, the output panel should report the issue in the HTML file. For me, the issue was I had a div inside a p tag which I assume prettier/VSCode conventions are against. When I removed it (and combined with all the settings above, namely default formatter and format on save) I got prettier working.

.prettierrc is not required unless you want to override VSCode settings

On Windows:

We can open the below file using:

Start > Run 

File Path:

%AppData%\Code\User\settings.json

Change From:

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

To:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Note:

• If the above is not present, add it instead of changing.
• You should already have installed the "Prettier - code formatter" to see the effect of the above change -

This is not a problem with Prettier itself, but prettier-vscode, the VSCode extension. According to its documentation, Vue formatting is disabled by default:

prettier.disableLanguages (default: ["vue"])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

In this case, to enable you should set "prettier.disableLanguages": []. And since this is an extension configuration, you should do it in VSCode settings file, not .prettierrc.

For me the problem was with HTML files where formatting stopped working one day. I had Format On Save configured, which worked in all files except HTML.

I then realized that I experimentally set Format On Save Mode to modification instead of file and forgot about it. This had an effect of not formatting anything in HTML files, surprisingly not even my changes. Setting it back to file solved the issue.

1 .Use the other extension prettier was not working for me i just use the other VSCODE extension named PrettierNow i think this will help, done for me.Checkout the extension here

2 .From Latest Updates of prettier you need to add .prettierrc file in your root of the projects if you want to stick with prettier. An example of .prettierrc is this-

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}

Enabling "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting worked for me! 🙌

Print

If Prettier formats all other files except HTML files automatically on save:

Press Cmd + P or Ctrl + P to open the command palette and type the following text in it:

> open settings

Click on Preferences: Open Settings (JSON) from the suggestion dropdown. Inside the settings.json file, Check if "[html]" key exists. If the key exists and its value indicates using another formatting extension installed in Visual Studio Code, you should reset it back to use Prettier.

"[html]": {
    "esbenp.prettier-vscode"
}

For an instance, sometimes, the value of "[html]" key could be "remimarsal.prettier-now" when you would have Prettier Now extension installed.

If you don't have any other formatting extension installed other than Prettier, you can also remove the "[html]" key altogether from settings.json file.

This is what worked for me (my default formatter was already set to Prettier)

1. Change default formatter to default
2. Restart vscode
3. Change default formatter back to Prettier.

Go to Manage(located on left-bottom corner) -> Settings -> Users tab -> Text-Editor -> Formatting -> check the format on save

if not working then close and again open your vscode editor

For me - it was to do with ESlint which also works with Prettier. Eslint wasn't working (a local installation vs global installation conflict) which broke Prettier.

Recently I got the same problem, that Prettier does not format code automatically on saving. Checking Prettier, I saw an error: Invalid "arrowParens" value. Expected "always" or "avoid", but received true.

The error message was seen when I clicked this:

It turned out that I have Prettier Now installed also. This has a boolean value in my config file. After uninstalling Prettier Now, everything works fine.

Some times with auto plugins update Required files used by Prettier might go missing .

Check this path if files are present here or folder is empty

C:\Users\YOURUSERNAME\.vscode\extensions\esbenp.prettier-vscode-2.2.2\out

If missing uninstall and reinstall prettier

If none of the other answers work, check that a conflicting prettier config .prettierrc does not exist in your working directory or check for .prettierignore to be sure the files/folders are not being ignored.

Check if there is a .vscode/settings.json file in your project directory (workspace). In my case someone had checked in this file:

{
  "editor.formatOnSave": false
}

Solution: Delete the file (delete it from source control too) and add .vscode/ to .gitignore (if you're using git).

In some cases where prettier is provided as a dependency, you might need to install it before prettier vscode recognizes it using one of the following commands, depending on the package manager you are using
npm i or yarn

In my case it turned out I had configured prettier to use a configuration file that didn't exist (see screnshot below). That was hard to find since there wasn't any error message but prettier just didn't work. Maybe this helps somebody, too.

in my case it was being hijacked by typescript formatter.

it was driving me crazy because it kept re-formatting my spaces!

to fix i did cmd+. (settings) type -> "default formatter"

and unchecked typescript

I Rolling back prettier to 1.7.3 and fixed it

In my case I had to do the following:

1. Install prettier from the command line(npm install --save-dev --save-exact prettier prettier-plugin-custom)
2. Reload VSCode

and voilà, everything started working.

TIP: To make sure the installation is good I checked for the version:

npx prettier --version

Check for requirePragma in .prettierrc, it says you need to add a top level comment for that file to be formatted

remove that rule and it should work

How to format your code through VScode's ESlint plugin

Alright, rather than giving a guide on how to use VScode's Prettier extension, I'd rather explain how to rely on ESlint and have both worlds: checking that your code is correct (ESlint), then formatting it (Prettier).

What are the advantages of this?

• not forcing your entire team to use VScode with the Prettier extension, maybe some prefer Vim, IntelliJ's Webstorm, Emacs etc... A tool-agnostic solution is IMO always better.
• I think that linting your code is more important that formatting it, but if you have both extensions working at the same time, you may have conflicts between the formatting and the linting.
• your hardware will struggle less, if you have less extensions running (mainly because it can stop the conflicts)
• using an ESlint + Prettier combo will strip the need to have a specific personal configuration aside of the codebase (untracked). You'll also benefit from having Vue/Nuxt specific ESlint rules and a simpler/more universal configuration.
• an ESlint configuration can be configured to be run before a commit, in a CI/CD or anywhere really.