Question

[Solved] Why does Prettier does not format code in VS Code?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code.

When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted at all.

My .prettierrc settings:

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

I have so many source code lines, so I cannot format them manually. What am I doing wrong?

Solution #1:

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…

Respondent: Miha

Solution #2:

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

Steps to enable default formatter

Also make sure that your format on save is enabled:

Format on save check

Respondent: lbragile

Solution #3:

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

enter image description here

Respondent: Simin Maleki

Solution #4:

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

enter image description here

Respondent: FacePalm

Solution #5:

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.

enter image description here

Respondent: Juan Castano

Solution #6:

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.

Respondent: Lucas

Solution #7:

I faced this problem and these three steps solved my problem:
Prettier Doesn't format code

Respondent: Arsham

Solution #8:

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.

enter image description here

Respondent: Dan Macák

Solution #9:

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
}
Respondent: Devesh

Solution #10:

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.

enter image description here

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

Respondent: supi

Solution #11:

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.

Respondent: Wide Awake

Solution #12:

can you try to add this section to your user setting file?

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

Solution #13:

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

Print

Respondent: Zenox

Solution #14:

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:UsersYOURUSERNAME.vscodeextensionsesbenp.prettier-vscode-2.2.2out

If missing uninstall and reinstall prettier

Respondent: kartick shaw

Solution #15:

File Path:

C:UserspgmreAppDataRoamingCodeUsersettings.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.

Solution #16:

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:
enter image description here

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.

Respondent: jaop

Solution #17:

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

Respondent: Pankaj Sharma

Solution #18:

I Rolling back prettier to 1.7.3 and fixed it

Respondent: Ali Monapour

Solution #19:

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.

Respondent: piouson

Solution #20:

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).

Respondent: TrueWill

Solution #21:

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.

Respondent: Sakthi

Solution #22:

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
Respondent: Randall Flagg

Solution #23:

I tried to enable “Format On Save” and set the “Auto Set 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)
  1. Settings(Inside the manage dropdown list)
  1. Search for Format On Save and enable it(check the box)
  1. Scroll down and look for Auto Save Delay and set it to 0
Respondent: Gark

Solution #24:

If neither Format Document With nor editing the config file worked for you, then try disabling and enabling Prettier.
When that is done, there will be a Reload Required button, Press that. It should work.

Respondent: NeERAJ TK

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy