Why does Prettier not format code in VS Code?

Question

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?

Seems that prettier by default has [prettier.disableLanguages](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode#user-content-prettier.disablelanguages-(default%3A-%5B%22vue%22%5D)) set to `["vue"]` — barbsan, Oct 01 '18 at 08:25
I'd add to `.prettierrc` line `"disableLanguages": []`. Docs says that this change requires restart — barbsan, Oct 01 '18 at 08:34
There's also [issue](https://github.com/prettier/prettier-vscode/issues/590) for v1.27.2 with note that the same config worked for v.1.23 — barbsan, Oct 01 '18 at 09:41
Upvoted b/c just pressing `CMD`+ `Shift` + `P` then **Format Document**, then choosing Prettier as my default formatter helped me :D — Blundering Philosopher, Oct 25 '19 at 09:59
If nothing works for you, be sure to check out my answer: https://stackoverflow.com/a/64273353/4298115 — lbragile, Dec 17 '20 at 20:02
For me, it was not working even after making all the configuration setting changes. Then, I realized I was trying to format a code fragment `var x = "test";` written in HTML file when I should have written it in a `*.JS` file. When I wrote the JS code into a JS file it got formatted to `var x = 'test'`. — RBT, Apr 08 '21 at 04:34
Try to **disable prettier** –> **reload vscode** -> **enable prettier** — Eugene P., Sep 19 '21 at 09:28
Note that [Prettier can not format python files](https://i.stack.imgur.com/WNqVs.png). — Shub, Jun 24 '23 at 06:43
@Shub Python is quite opinionated in terms of formatting by default. You can always use this if you really need formatting: https://github.com/psf/black — kissu, Jun 24 '23 at 14:07

score 1216 · Accepted Answer · edited Apr 03 '23 at 10:08

1216

Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
Set Prettiers as Default formatter.

If above does not work:

ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter

edited Apr 03 '23 at 10:08

rofrol

14,438
7
79
77

answered Nov 02 '19 at 08:47

Miha

13,223
2
15
16

8

I did configure Prettier as std formatter in settings but it just would not work. This worked. Made my day! – Flummiboy Apr 28 '20 at 13:26
Same here, but I had to de-select my default formatter and then perform the action you mention again for this to work. – lmerino Oct 16 '20 at 15:51
57

Not sure where to find `Configure Default Formatter` but I used File->Settings->Text Editor->Default Formatter – wlf Oct 17 '20 at 12:49
3

When I select the default formatter as Prettier, it formats that file but after that it does not work on save. I have my save option checked but still. I had to select the default formatter again and again. Any Solution – Himanshu Tariyal Nov 28 '20 at 14:38
4

@HimanshuTariyal This should work for you, but feel free to check out my solution: https://stackoverflow.com/a/64273353/4298115 – lbragile Dec 17 '20 at 20:00
Is this some kind of issue in vscode? It worked for me as well – Arun Feb 21 '21 at 20:50
What about making prettier AND eslint make changes to the code? – Shining Love Star May 06 '21 at 18:20
@jrypkahauer this is basically [my answer](https://stackoverflow.com/a/68880413/8816585). ☺️ – kissu Sep 08 '21 at 20:54
My VSCode is suddenly adding a blank line at the end of file when I save. I have disabled all options to add a new line. I even uninstalled the `Prettier` extension. But it still keeps adding a new blank line at the end of file when I press `ctrl + s`. Does anyone know why? – CatarinaRuna Sep 20 '21 at 07:15
This works, however , only after a recent change in that document. if I write something , don't format yet and switch to another file and edit , then it will not format either of the files . in such case there is an option to create a nice keybind to force it. type Format Document (Forced) in command palette and configure keybindings , then press on the pen to edit a new key binding . – boaz levinson Jan 26 '22 at 08:07
The prettier wasn't showing up even after being installed. Reinstalled and reloaded and it started working. thanks – Visakh Vijayan Mar 04 '23 at 08:13
When I did this I found that the (also modified elsewhere) was present (as in the picture). I hovered over it and it told me it was being modified by the workspace. I followed the link and found the workspace had a rule "format on save" unchecked. I checked that as well and now it formats on save. – RvrTex Jul 25 '23 at 00:38

score 525 · Answer 2 · edited Sep 28 '22 at 17:29

525

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 Prettier - Code formatter (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:

edited Sep 28 '22 at 17:29

milo

3
4

answered Oct 09 '20 at 03:02

lbragile

7,549
3
27
64

9

Randomly my vscode stop working with prettier after months of working correctly, don't know why this fixes it :pray: – ncubica Oct 15 '20 at 19:50
@ncubica Exact same thing happened to me and I was very confused since I did nothing to cause the issue. Took a bit of digging but finally found this and had to share. Glad it works for you :) – lbragile Oct 15 '20 at 20:55
4

I did this and also tried the solution from @miha to no avail. Finally uninstalled/reinstalled and it worked – Dani Amsalem Jul 15 '21 at 15:49
A couple gotchas that were required for this to work: 1. remote needs to be configured for prettier if you're using those features, and 2. I had to restart vscode in order for this to work. – Jason R Stevens CFA Aug 05 '21 at 20:54
I needed to first install the [Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – Boris Verkhovskiy Mar 31 '22 at 07:13
2

While my last screen looks nothing like yours (the latest VS Code has no formatter options), the tip to use the search is what eventually found the default formatter setting for me. – Suncat2000 Apr 15 '22 at 18:51

score 147 · Answer 3 · edited Jul 03 '23 at 17:53

147

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.

edited Jul 03 '23 at 17:53

Slate

221
5
14

answered Jun 03 '19 at 14:45

FacePalm

10,992
5
48
50

7

Sometimes Prettier won't show at the bottom, but another extension (eg. ESLint) will, and if you click on it there's a drop-down to pick other tools ... including Prettier. Pick it to see Prettier's log (and after that Prettier should show in the tray). – machineghost Dec 25 '19 at 23:19
2

I do not see `prettier` at the bottom right. I have `"editor.defaultFormatter": "esbenp.prettier-vscode",` and installed the ext. Want powershell format. – Timo Jun 06 '21 at 15:46
not only for syntactic errors but other errors with your configuration (for example, wrong .prettierrc path) will appear here too – David Torres Sep 06 '22 at 13:17

score 111 · Answer 4 · edited Sep 25 '19 at 08:30

111

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

edited Sep 25 '19 at 08:30

Norbert Bartko

2,468
1
17
36

answered Sep 25 '19 at 07:56

Simin Maleki

1,311
1
8
11

26

also `alt (command) + shift + f` is for formatting without save. – yaya Aug 02 '20 at 22:41
2

Note that, in addition to Format On Save being enabled, you also often have to have a default formatter specified. – Andrew Nov 12 '20 at 16:31
Following every solution from the top, it worked at this point : ) , thanks a lot – sushmanth natha Sep 09 '21 at 06:57
3

Using `alt (command) + shift + f` helped me. A pop up came up to select default formatter since there were multiple present. – pankaj Jan 22 '22 at 06:06
Also alt + shift + f, give me an easy way to choice default Formatter – Dany Feb 17 '22 at 12:11
Setting a default formatter and doing this worked for me, thanks! Weird that this isn't true on default. – khaki May 14 '22 at 13:28
@yaya I think that's `OPTION` instead of `COMMAND` on Mac. So `OPTION+SHIFT+F`. – Paul Razvan Berg Nov 26 '22 at 17:19

score 71 · Answer 5 · edited May 11 '23 at 09:44

71

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

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

See the image below;

2 - Format On Save

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

See the image below;

edited May 11 '23 at 09:44

Caltor

2,538
1
27
55

answered Nov 16 '21 at 18:03

Levent Divilioglu

11,198
5
59
106

I did all this and still was not working. I have a mono repo. After removing .prettierrc and .eslintrc file from my sub project and only keeping my main mono repo file, it started to work. – Stephane Aug 29 '22 at 13:59

score 54 · Answer 6 · answered Jul 01 '21 at 03:58

54

disable and enable prettier extension solves my problem

answered Jul 01 '21 at 03:58

Ymin Hu

619
6
7

1

If all the other configs are right, this will do the trick. – OctaviaLo Jul 05 '21 at 05:40
2

Can't believe this was it... Was trying to fix this for almost an HOUR. Had vs extensions installed, npm packages installed, settings.json setup, eslintrc was good to go, tried toggling settings, going in settings panel, everything... I'm just amazed this was it, since I tried "turning it off and on again" in every other regard and the settings seemed to be applied instantly... – Justin Jul 26 '21 at 09:16
It looks like my issue was caused by upgrading my version of node. Doing this fixed the problem. – Brad W Aug 04 '21 at 19:24
2

Using `Developer: Reload Window` from the command palette worked for me too. – Doom5 Sep 05 '21 at 07:47
This worked for me when I'm configuring formatting for Solidity files, and I spent 2 weeks trying to make it work again only to find up a simple "have you tried turning it off and on" would have worked. :/ – kennysliding Mar 31 '22 at 07:16

score 50 · Answer 7 · edited May 29 '21 at 14:06

50

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

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

edited May 29 '21 at 14:06

iPzard

2,018
2
14
24

answered Aug 08 '19 at 04:26

Alongkorn

3,968
1
24
41

1

That was also my case. The default formatter was set to the correct one by formatting on save was disabled. – Andrzej Sala Jul 08 '21 at 09:13
That's my case!! Thanks, It didn't work because formatOnSave was set to false in json – devstefancho May 29 '22 at 14:59

score 48 · Answer 8 · answered Jul 10 '20 at 02:19

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.

If you do have an ESlint config already, you should probably use Prettier via ESlint. Here is [my answer](https://stackoverflow.com/a/68880413/8816585) on how to achieve such thing. — kissu, Sep 10 '21 at 06:23

Arsham Arya · Answer 9 · 2023-01-25T04:18:45.297

30

These three steps may solve your problem:

1 - Go to settings, then search for auto format

2 - Select Text Editor

3 - Select esbenp.prettier-vscode as your Default Formatter.

Simply said, go to Settings > User tab > Text Editor > Editor: Default Formatter and change it to prettier.

edited Jan 25 '23 at 04:18

answered Oct 19 '20 at 06:42

Arsham Arya

1,461
3
17
25

Manohar Reddy Poreddy · Answer 10 · 2022-01-13T02:59:08.750

20

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 - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

edited Jan 13 '22 at 02:59

answered Nov 09 '20 at 09:55

Manohar Reddy Poreddy

25,399
9
157
140

1

@BillalBegueradj True, accepted didn't work for me, and I wasted about 1 hour, so posted this one. Maybe this is a more recent issue that we face in 2020. – Manohar Reddy Poreddy Nov 10 '20 at 12:03
Your solution is the “non graphical” approach to my answer: https://stackoverflow.com/a/64273353/4298115 – lbragile Dec 01 '20 at 07:16
@lbragile I could not do it using GUI, hence above solution. Especially, this is better way when we have several formatters for various languages, there is no time to waste when we can copy-paste one line by opening one file. – Manohar Reddy Poreddy Dec 01 '20 at 21:21
1

How to add in macos? – MKapp Sep 15 '21 at 09:19
1

@MalithKuruppu This also works on macOS. You just need to press cmd+p and select "Preferences: Open Settings (JSON)" to get to the `settings.json` file. – Chris Redford Sep 21 '21 at 13:49

score 18 · Answer 11 · answered Dec 21 '20 at 05:51

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

Dan Macak · Answer 12 · 2020-12-18T08:05:45.377

14

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.

edited Dec 18 '20 at 08:05

answered Dec 17 '20 at 18:38

Dan Macak

16,109
3
26
43

score 13 · Answer 13 · answered Oct 01 '18 at 17:20

13

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.

answered Oct 01 '18 at 17:20

Lucas

4,067
1
20
30

2

This setting has been removed. – secondman Oct 07 '21 at 16:36
Yep, OP should update or remove it or downvotes will flow... :p – sorin Jan 23 '22 at 15:44

score 13 · Answer 14 · answered May 17 '22 at 00:46

13

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

answered May 17 '22 at 00:46

Sonic Soul

23,855
37
130
196

1

Legend! Thanks so much, this has been such a pain for me! – velua Dec 28 '22 at 01:57

Devesh · Answer 15 · 2020-01-27T13:13:54.567

10

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
}

edited Jan 27 '20 at 13:13

answered Sep 15 '19 at 11:45

Devesh

929
12
10

kissu · Answer 16 · 2021-08-22T15:29:40.220

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.

How to achieve this kind of setup?

Let's start first by installing the ESlint extension and only it, DO NOT install the Prettier one.

Not installed Vetur yet?

I do heavily recommend it for Vue2 apps (what Nuxt is running as of today), you can find it below. It will allow to quickly and simply ESlint (+ Prettier) any .vue files.

When it's done, access the Command Palette with either ctrl + shift + p (Windows/Linux) or cmd + shift + p (Mac) and type Preferences: Open Default Settings (JSON)

There, you should have something like this

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

How to try that your configuration is now working?

To see if my solution is working, please download this Github repo, get the latest stable Node version (eg: 14) and run yarn to have it working. Otherwise, simply open VScode.
This repo can also be used to double-check that yours is properly configured by inspecting my files there!

Then, you could access any .js or .vue file and see the problems there (Command Palette: Problems: Focus on Problems View). nuxt.config.js and /pages/index.vue are good examples, here is the index.vue file.

You can see that we do have several things that can be fixed by Prettier but that we do also have an eslint(vue/require-v-for-key) error. The solution is available as a comment just below btw.

PS: if you want to have inline ESlint warnings/errors as in the screenshot, you can install Error Lens, it's a super amazing extension if you want to get rid of errors.

Save this file and you should saw that every auto-fixable things are done for you. Usually it's mainly Prettier issues but it can also sometimes be ESlint too. Since we do have the ESlint rules from Nuxt, you'll get some nice good practices out of the box too!

Tada, it's working! If it's not, read the section at the end of my answer.

If you want to create a brand new project

You can run npx create-nuxt-app my-super-awesome-project and select few things there, the most important being Linting tools: Eslint + Prettier of course (hit space to opt-in for one of them).

Warning: as of today, there is an additional step to do to have ESlint + Prettier working properly as shown in this Github issue. The fix should be released pretty soon, then the configuration below will not be needed anymore!

To fix this, run yarn add -D eslint-plugin-prettier and double check that your .eslintrc.js file is a follows

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended', // this line was updated
    'prettier'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

Then, you can have it working totally fine as above. Save the file and it should run ESlint then Prettier one after the other!

If you still have some issues

try to use the Command Palette again and ESLINT: restart ESLint Server or even Developer: Reload Window
feel free to leave a comment or contact me if you need some help

score 9 · Answer 17 · answered Apr 09 '21 at 07:47

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.

score 9 · Answer 18 · answered Aug 16 '21 at 00:02

9

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

Change default formatter to default
Restart vscode
Change default formatter back to Prettier.

answered Aug 16 '21 at 00:02

Kendra

161
1
2

To [restart vscode](https://stackoverflow.com/a/42002990/9868383) Open the command palette `(Ctrl + Shift + P)` and execute the command: `Reload Window`, thanks! – D4ITON Sep 09 '21 at 14:58

score 7 · Answer 19 · edited Oct 04 '22 at 20:39

7

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

Print

edited Oct 04 '22 at 20:39

General Grievance

4,555
31
31
45

answered May 05 '20 at 03:18

Zenox

71
1
3

score 7 · Answer 20 · answered Nov 28 '20 at 11:53

7

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

answered Nov 28 '20 at 11:53

Pankaj Sharma

71
1
2

score 5 · Answer 21 · answered Nov 26 '20 at 16:14

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.

score 5 · Answer 22 · answered Apr 24 '22 at 16:31

5

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.

answered Apr 24 '22 at 16:31

Semjon Mössinger

1,798
3
22
32

score 4 · Answer 23 · answered Nov 06 '20 at 18:40

4

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.

answered Nov 06 '20 at 18:40

piouson

3,328
3
29
29

Yep for me it was an older path... So it doesn't works silently. – Speuline Jan 31 '22 at 17:34

score 4 · Answer 24 · answered Feb 18 '21 at 22:40

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

score 4 · Answer 25 · answered May 26 '21 at 00:43

4

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

answered May 26 '21 at 00:43

Hayyaun

303
3
10

score 4 · Answer 26 · answered Mar 17 '22 at 18:05

From the menu navigate through: view -> Command Palette Form the command palette search for Format Document and then select Prettier as your format engine.

I had prettier already working on another project, but for the new one I had do it through this way to enable it again for the new project.

score 4 · Answer 27 · answered Oct 07 '22 at 21:23

Check your package.json file for a property of prettier as this will take precedence.

{
  "name": "example",
  "scripts": { ... },

  "prettier": {},

  "dependencies": { ... },
  "devDependencies": { ... },
}

Delete this property and the .prettierrc file will be used.

The order of precedence is stated in the prettier docs.

score 3 · Answer 28 · answered Aug 30 '19 at 05:09

3

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

answered Aug 30 '19 at 05:09

kartick shaw

915
13
5

> "If missing uninstall and reinstall prettier" is what did it for me. I had all the settings right, and running prettier from an NPM script even worked right, but formatting on save didn't until I uninstalled and reinstalled. – redOctober13 May 19 '22 at 20:20

score 3 · Answer 29 · answered Aug 05 '20 at 13:41

3

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.

answered Aug 05 '20 at 13:41

Wide Awake

1,339
1
11
18

How to resolved this. I am having an issue where Eslint is asking for a new line when press enter and save it gets back to the same position and error starts appearing again. – ammad khan Oct 01 '20 at 10:18
If you do have an ESlint config already, you should probably use Prettier via ESlint. Here is [my answer](https://stackoverflow.com/a/68880413/8816585) on how to achieve such thing. – kissu Sep 10 '21 at 06:24

score 2 · Answer 30 · answered Feb 24 '20 at 17:09

2

I Rolling back prettier to 1.7.3 and fixed it

answered Feb 24 '20 at 17:09

Ali Monapour

29
2

score 2 · Answer 31 · answered Feb 23 '21 at 20:27

2

In my case I had to do the following:

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

and voilà, everything started working.

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

npx prettier --version

answered Feb 23 '21 at 20:27

Randall Flagg

4,834
9
33
45

This worked for me. I had `prettier` installed globally already, but it didn't work. If I had to guess, it might have been a WSL issue. – August Janse Apr 08 '21 at 10:25

score 2 · Answer 32 · answered Apr 09 '21 at 05:05

2

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

answered Apr 09 '21 at 05:05

gandharv garg

1,781
12
17

score 2 · Answer 33 · answered Jul 06 '22 at 21:16

2

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

Prettier: Require Config

answered Jul 06 '22 at 21:16

Eutrepe

866
1
9
9

score 2 · Answer 34 · answered Jul 14 '22 at 08:37

2

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.

answered Jul 14 '22 at 08:37

Shahbaz A.

4,047
4
34
55

`npm install` installs the dependecies specified in your `package.json` + their version ranges. It doesn't update anything per-se. Important difference IMO. – kissu Jul 14 '22 at 09:36
Yes @kissu you are right. The important things here is that because of the difference prettier stopped working. And after running it, prettier was able to work again. So may be for someone else who is also overlooking this it will be helpful. – Shahbaz A. Jul 15 '22 at 05:56

Andre Lopes · Answer 35 · 2022-07-28T17:46:40.857

2

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

edited Jul 28 '22 at 17:46

answered Jul 28 '22 at 17:38

Andre Lopes

63
7

score 1 · Answer 36 · answered Oct 13 '20 at 00:35

1

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.

answered Oct 13 '20 at 00:35

Sakthi

21
2

11

What does this add to the other 4 answers that mention the same thing? – krisz Oct 13 '20 at 00:55

score 1 · Answer 37 · edited May 21 '21 at 11:06

1

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.

Manage(The gear Icon bottom left)

Settings(Inside the manage dropdown list)

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

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

edited May 21 '21 at 11:06

Ash Clarke

4,807
1
37
48

answered Apr 01 '21 at 14:56

Gark

35
9

score 1 · Answer 38 · answered Apr 22 '21 at 10:34

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.

score 1 · Answer 39 · answered Aug 19 '21 at 04:12

1

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

answered Aug 19 '21 at 04:12

Phong

1,457
14
16

Despite `npx prettier --version` working, I wasn't getting any auto-formatting until I ran the `install` command in this answer. (I used `yarn`, but the result is the same.) – Tyler Forsythe Sep 17 '21 at 19:38

score 1 · Answer 40 · answered Oct 19 '21 at 09:53

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 !

`"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },` Worked perfectly for me! Otherwise everything else was set fine but still prettier was not working on save. — Kia Kaha, Apr 19 '22 at 12:34

score 1 · Answer 41 · answered Dec 14 '21 at 04:46

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.

score 1 · Answer 42 · answered Jan 26 '23 at 11:06

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.

score 1 · Answer 43 · answered Aug 19 '23 at 14:33

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.

score 0 · Answer 44 · answered Aug 08 '22 at 15:08

0

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

answered Aug 08 '22 at 15:08

Shivansh Upadyay

26
1

score 0 · Answer 45 · answered Feb 05 '23 at 22:20

0

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

answered Feb 05 '23 at 22:20

Greg

187
3
15

Not sure why someone downvoted this. I tried all the solutions being extolled, none worked. Then I set my formatter to Null, closed/reopened VS Code, formatted a document and Prettier magically started working since it detected my .prettierrc file. Previously it kept trying to use the VS Code settings even though I told it to user Prettier. – billoreid Jul 15 '23 at 02:13

score 0 · Answer 46 · answered Jul 12 '23 at 19:15

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.

Alejandro CM · Answer 47 · 2022-12-09T02:38:28.050

-3

I tried every single solution in this thread, and I just realized that my only issue was my Visual Studio color theme. That simple!

Before:

After:

edited Dec 09 '22 at 02:38

answered Dec 09 '22 at 02:33

Alejandro CM

69
7

3

The emojis tho! – kissu Dec 09 '22 at 02:35