Why Prettier does not format code in VSCODE?

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

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, I can not format them manually. What am I doing wrong?

28 thoughts on “Why Prettier does not format code in VSCODE?”

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

     "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode",
            //   "editor.formatOnSave": true,
        },
    
    Reply
  2. 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.

    Reply
  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

    Reply
  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

    Reply
  5. 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

    Reply
  6. 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

    Reply
  7. 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…

    Reply
  8. 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
    }
    
    Reply
  9. 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.

    Reply
  10. 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.

    Reply
  11. 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.

    Reply
  12. 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.

    Reply
  13. 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

    Reply
  14. 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

    Reply
  15. 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

    Reply
  16. 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

    Reply
  17. File Path:

    C:\Users\pgmre\AppData\Roaming\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.
    Reply
  18. 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).

    Reply

Leave a Comment