Pretier extension not working despite setting as default formatter

Question

After recently updating my VS Code, my prettier stopped working. The error says:

Extension 'Prettier - Code Formatter' cannot format (insert path here).

What I've tried to fix this issue,

Setting the default formatter from 'null' to 'esbenp.prettier-vscode'
Manually setting prettier as default formatter in settings.json

3. Install/Uninstall the prettier extension 4. Install/Uninstall VS Code itself and wiping out all extensions installed

All of this doesn't work at all and I'm out of ideas on how to fix this issue.

Prettier Version: 5.8.0 VS Code Version: 1.51.5

this is probably because you have prettier disabled for .js files. Does your prettier work on html and css? — Samyak Jain, Nov 24 '20 at 06:16
If you have a .prettierrc file under the root directory of your project it will override the settings.json file. If there's no .prettierrc file, then what you have in settings.js should be applied. — Sandsten, Nov 24 '20 at 11:00
Does it say prettier in the bottom hand right corner of VSCode when you have a .js file open? — Sandsten, Nov 24 '20 at 11:03
@Sandsten No, the prettier label doesn't show up anymore. I also don't have a .prettierrc file on my project directory — maria, Nov 25 '20 at 01:38
Have you tried this solution? https://stackoverflow.com/a/58669550/5903504 — Sandsten, Nov 25 '20 at 10:40

JORDANO · Answer 1 · 2021-02-11T21:56:18.073

From Sandstens answer, I got a solution working for myself. Just create a .prettierrc file in the root of your directory, and go to https://prettier.io/docs/en/configuration.html, copy the json config on the page, I'll paste it here for convenience:

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

Then navigate to the file in your project and try seeing if it'll format upon save

score 0 · Answer 2 · answered Jun 22 '21 at 21:06

After having tried multiple methods (including all the ones you have maria) I've come across a fix that works, at least for me.

Steps

Navigate to the root of your project
Right click on the .prettierrc file
- If you don't have this file, check out JORDANO's answer
Select 'Copy Path'
Press Cmd, (Mac) or Ctrl, (Windows)
- Alternatively, go to File/Code > Preferences > Settings
Search settings for prettier.configPath
Finally, paste the path you copied on step 3

I came across this fix as I was scrolling through Prettier's settings and noticed the 'Prettier: Config Path' box was empty. Hopefully this helps anybody else that is having this problem. Make sure to try all the other methods maria tried if my fix doesn't work for you!

Pretier extension not working despite setting as default formatter

2 Answers2

Steps