525

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?

8
  • 5
    Seems that prettier by default has prettier.disableLanguages set to ["vue"]
    – barbsan
    Oct 1, 2018 at 8:25
  • 2
    There's also issue for v1.27.2 with note that the same config worked for v.1.23
    – barbsan
    Oct 1, 2018 at 9:41
  • 47
    Upvoted b/c just pressing CMD+ Shift + P then Format Document, then choosing Prettier as my default formatter helped me :D Oct 25, 2019 at 9:59
  • 2
    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 8, 2021 at 4:34
  • 2
    Try to disable prettier –> reload vscode -> enable prettier
    – Eugene P.
    Sep 19, 2021 at 9:28

45 Answers 45

1146
  1. Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
  2. Set Prettiers as Default formatter. enter image description here

If above does not work:

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

11
  • 7
    I did configure Prettier as std formatter in settings but it just would not work. This worked. Made my day!
    – Flummiboy
    Apr 28, 2020 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, 2020 at 15:51
  • 53
    Not sure where to find Configure Default Formatter but I used File->Settings->Text Editor->Default Formatter
    – wlf
    Oct 17, 2020 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 Nov 28, 2020 at 14:38
  • 4
    @HimanshuTariyal This should work for you, but feel free to check out my solution: stackoverflow.com/a/64273353/4298115
    – lbragile
    Dec 17, 2020 at 20:00
518

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

Steps to enable default formatter

Also make sure that your format on save is enabled:

Format on save check

8
  • 9
    Randomly my vscode stop working with prettier after months of working correctly, don't know why this fixes it :pray:
    – ncubica
    Oct 15, 2020 at 19:50
  • 2
    I did this and also tried the solution from @miha to no avail. Finally uninstalled/reinstalled and it worked Jul 15, 2021 at 15:49
  • 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, 2022 at 18:51
  • 1
    This is thew best answer Nov 9, 2022 at 15:40
  • 1
    Years on and this is still the best answer Nov 10, 2022 at 14:55
143

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

6
  • 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). Dec 25, 2019 at 23:19
  • 1
    Thank you so much! This took me two hours to try and figure out to no avail until I saw your answer. Something so simple. Jan 20, 2021 at 5:58
  • 1
    You saved my life. I forgot to put a dot before my config file so it was using VS Code configuration by default. Feb 23, 2021 at 14:20
  • 1
    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 6, 2021 at 15:46
  • not only for syntactic errors but other errors with your configuration (for example, wrong .prettierrc path) will appear here too Sep 6, 2022 at 13:17
110

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

7
  • 26
    also alt (command) + shift + f is for formatting without save.
    – yaya
    Aug 2, 2020 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, 2020 at 16:31
  • Following every solution from the top, it worked at this point : ) , thanks a lot Sep 9, 2021 at 6:57
  • 2
    Using alt (command) + shift + f helped me. A pop up came up to select default formatter since there were multiple present.
    – pankaj
    Jan 22, 2022 at 6:06
  • Also alt + shift + f, give me an easy way to choice default Formatter
    – Dany
    Feb 17, 2022 at 12:11
67

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

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

See the image below;

Default Formatter Capture

2 - Format On Save

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

See the image below;

Format On Save Capture

1
  • 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, 2022 at 13:59
53

disable and enable prettier extension solves my problem

5
  • 1
    If all the other configs are right, this will do the trick.
    – OctaviaLo
    Jul 5, 2021 at 5: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, 2021 at 9:16
  • It looks like my issue was caused by upgrading my version of node. Doing this fixed the problem.
    – Brad W
    Aug 4, 2021 at 19:24
  • 2
    Using Developer: Reload Window from the command palette worked for me too.
    – Doom5
    Sep 5, 2021 at 7: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. :/ Mar 31, 2022 at 7:16
46

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

1
  • If you do have an ESlint config already, you should probably use Prettier via ESlint. Here is my answer on how to achieve such thing.
    – kissu
    Sep 10, 2021 at 6:23
45

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

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},
2
  • 1
    That was also my case. The default formatter was set to the correct one by formatting on save was disabled. Jul 8, 2021 at 9:13
  • That's my case!! Thanks, It didn't work because formatOnSave was set to false in json May 29, 2022 at 14:59
30

These three steps may solve your problem:

Prettier Doesn't format code

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.

0
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:

5
  • 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. Nov 10, 2020 at 12:03
  • Your solution is the “non graphical” approach to my answer: stackoverflow.com/a/64273353/4298115
    – lbragile
    Dec 1, 2020 at 7: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. Dec 1, 2020 at 21:21
  • 1
    How to add in macos?
    – MKapp
    Sep 15, 2021 at 9: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. Sep 21, 2021 at 13:49
18

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

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

enter image description here

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

2
  • 2
    This setting has been removed.
    – secondman
    Oct 7, 2021 at 16:36
  • Yep, OP should update or remove it or downvotes will flow... :p
    – sorin
    Jan 23, 2022 at 15:44
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

enter image description here

1
  • 1
    Legend! Thanks so much, this has been such a pain for me!
    – velua
    Dec 28, 2022 at 1:57
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
}
10

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.

enter image description here

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)

enter image description here

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.

enter image description here

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

enter image description here

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
0
9

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.

9

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

  1. Change default formatter to default
  2. Restart vscode
  3. Change default formatter back to Prettier.
1
  • To restart vscode Open the command palette (Ctrl + Shift + P) and execute the command: Reload Window, thanks!
    – D4ITON
    Sep 9, 2021 at 14:58
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

7

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

Print

5

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.

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.

Screenshot

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.

1
  • Yep for me it was an older path... So it doesn't works silently.
    – Speuline
    Jan 31, 2022 at 17:34
4

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

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

4

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.

0
4

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.

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

1
  • > "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. May 19, 2022 at 20:20
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.

2
  • 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 1, 2020 at 10:18
  • If you do have an ESlint config already, you should probably use Prettier via ESlint. Here is my answer on how to achieve such thing.
    – kissu
    Sep 10, 2021 at 6:24
2

I Rolling back prettier to 1.7.3 and fixed it

Not the answer you're looking for? Browse other questions tagged or ask your own question.