Why Does Prettier Not Format Code in VS Code

Why does Prettier not format code in VS Code?

How I've sorted it after having super huge frustrations with Prettier stopping working in VSCode.

  1. Select VS Code -> View -> Command Palette, and type: Format Document With
  2. Then Configure Default Formatter... and then choose Prettier - Code formatter.

This sorted the problem for me magically.

Depending on your case this might help you...

Vs Code, why Prettier is not formatting code

There can be two issue why prettier is not formatting your code.

1. You have multiple formatter available

  • Press CtrlShiftP and type "Format Document".
  • if you have multiple fomatter available you will be ask to choose a default one.
  • Select prettier to make it your default fomatter.

2. You don't have config file for prettier

  • In your project directory you need to have a prettierrc file which can be used to configure prettier. So create a new file with name .prettierrc and add some settings. For more information about .prettierrc file see this link
  • If you don't want to have this file and use default settings for prettier, go to settings and search for prettier require config and disable this setting.

Sample Image

Why Prettier code formatter stopped formatting in VS Code?

Follow theses steps and I think it is gonna work :

  1. Install prettier from the extensions store :

Sample Image


  1. Go and edit settings.json file and past in the lines below. You can find settings.json this way :
  • On Windows : F1 or Ctrl + Shift + P, then type open settings and choose Open Settings (JSON)
  • On MacOS : Shift + CMD + P, then the same steps as Windows
{ 

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

}

  1. Restart VS Code.

  2. Make sure you have the same checks icons at the bottom right corner of VS Code when you open a file that Prettier handles (.html, .css, .js, etc) :

Sample Image

Prettier doesn't format my code in Visual Studio on Next.js

  1. Make sure that Prettier is enabled as your default formatter. See here for details on how to do that.
  2. Make sure that Format On Save is enabled, or that you're calling the formatting option manually.
  3. Resolve all errors, then try again. Personally, Prettier refuses to format if there are any errors. Warnings are fine, but only if all errors are resolved does Prettier perform formatting, on my projects.


Related Topics



Leave a reply



Submit