Why does Prettier not format code in VS Code?

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

I Rolling back prettier to 1.7.3 and fixed it

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.

The only thing I needed to do was update my packages with a simple

npm install

I tried everything on here and it was still not working. Just seemed like it does not exist. Prettier was also added as a dependency in the project. It turned out that someone else had added or updated any package which caused my prettier to stop working.

Hoping it saves someone the headache it caused me.

I am working in WSL (will also work for people having the problem only in cutom workspaces) and I tried EVERY fix possible until I found this tab on vscode settings:

Select the tab regarding your problem and change all the settings you want again and change the setting "Files: Auto Save" to either "onFocusChange" or "onWindowChange".

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

For me helped disabled this option in VS Code settings (then prettier use default config):

Prettier: Require Config

For those looking to get this working with Prisma and other overriding extensions or project settings (like in the image above), use the following:

// Inside .vscode/settings.json
{
  // other extensions
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[prisma]": { // replace this with the language that is overriding 
    "editor.defaultFormatter": "Prisma.prisma" // Replace this with the extension/formatter you want for that language
  },
  // rest of .vscode/settings.json
}

You shouldn't override project settings by forcing your editor settings as some other answers would suggest. This will just annoy your team and or whoever manages the repository you're working on.

There are a few syntaxes that prettier is not able to parse. ?? is one of them. After removing the symbol my prettier worked like a charm. You should take a look at the output of the Prettier extension in vscode. That should point out the line and the syntax which is causing problems for prettier to format properly.

I tried to enable "Format On Save" and set the "Auto Save Delay" to 0. It worked, so I guess you could try this too.

Edit: You can see them through these steps.

1. Manage(The gear Icon bottom left)

2. Settings(Inside the manage dropdown list)

3. Search for Format On Save and enable it(check the box)

4. Scroll down and look for Auto Save Delay and set it to 0

If you have set all things which you can do in Setting and Prettier is not working. Try to install it through this command line. npm install --save-dev prettier

here my prettier config working on vue.js files, typescript files and json files.

arrowParens: 'always'
bracketSpacing: true
endOfLine: 'crlf'
htmlWhitespaceSensitivity: 'css'
insertPragma: false
jsxBracketSameLine: false
jsxSingleQuote: true
overrides:
- files: '*.json'
  options:
    semi: true
    parser: 'json'
parser: 'babel'
printWidth: 120
proseWrap: 'preserve'
quoteProps: 'truepreserve'
requirePragma: false
semi: false
singleQuote: true
tabWidth: 8
trailingComma: 'es5'
useTabs: true
vueIndentScriptAndStyle: 

Do not forget to update your vscode settings

{
"extensions.ignoreRecommendations": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"vetur.format.options.useTabs": true}

that's all folk's !

For my case i was using a windows machine and it turned out the file system had been corrupted thus prettier raised an error because it could not be able to open the config file due to file system corruption.

TO resolve it I run chkdsk /f h: on the terminal where h is the file partition.

This resolved the file corruption and prettier is now working fine.

I have same problem when I moved from Ubuntu to Windows 10.

The problem was with shortcuts 'ctrl + shirt + i', which was default on Ubuntu but was not in Win10.

Go to file -> preferences -> keyboard shortcuts.

Then write prettier and find 'Format Document (Forced)'. Click on pencil on left and write keyboard shortcut, press Enter.

If it is not possible because there is already command written to that shortcut, find it and change it to something else. Then it will be possible.

Consider reading Prettier's log output from here

For me - and since the log output says that he couldn't find .prettierrc.json file - renaming .prettierrc file to .prettierrc.json solved that for me!

Don't forget to enable "editor.defaultFormatter" in the settings of the VSCode. In my case it was null and hence even the "editor.formatOnSave" was also not seeming to solve the issue.

For me it worked when I got rid of parser: json in the .pretterrc file.

In the unlikely event that none of the above solutions work for you (like me), I had to set the default formatter to null in settings, then hit CTRL + SHIFT + P and search for "format document" (the default format document binding +R didn't work for me) then I was prompted to select a default formatter in a popup and after selecting prettier it formatted the document and also formats on saving now

Just in case, since its not already here...

I was trying to format a minified .js file in my node_modules folder so I could understand the code better and Prettier kept returning:

["INFO" - 7:13:19 PM] File is ignored, skipping.

In this case, you can force-format by opening the Command Palette Ctrl+Shift+P and then selecting Format Document (Forced) to have it format a file that would normally be ignored.

I've tried done all stuff but my codebase is not getting formatted. Then I checked my .prettierignore & some other developer just wrote /src there.

I removed it & everything is working fine now

The answer is scattered in all of these answers so I'll consolidate (because it could be the same as my problem, more than 1 setting not configured correctly)

1. Make sure that your default formatter is set.
   
   
   

2. Set your configuration file.
   
   
   

3. Set Prettier Path.
   
   
   

This should fix it, but make sure that your .prettierignore file is also set (just a little bit above the path option).

If you're using prettier globally vs locally, make sure the prettier path is set to your global install location (you can figure this out by typing $which prettier providing that you're using Linux.

I had no error in the ouput tab, but using the command Format Document With... actually throws an error, so I knew something was wrong.

In the end, the issue was that in my monorepo I had an empty node_modules folder at the root which made Prettier search here instead of the children folders. Deleting it fixed the issue.