VS-Code Prettier Format On Save doesn't work

Question

For about a month now, my Prettier extension has stopped working as it normally does. Most notably - format on save does not work. Other notes:

• Format on typing a ; works

• I get this error type symbol in the status bar next to the Prettier button - I can't find any reference to this relating to Prettier on Google:

  ]

• I have my format on save checked in Settings:

  

• 'Format Document,Format SelectionandFormat Document with` command palette options all do nothing

• Timing of the break coincides with moving from Prettier 2-3

• I've followed the migration steps and think all is in order. Some snippets of the configuration between eslint and prettier that I have:

  1. As per the prettier documentation, my VS Code settings has:

"eslint.autoFixOnSave": true, // (even though VSCode has this as deprecated), have tried with and without this line
"editor.codeActionsOnSave": {
  "source.organizeImports": true,
  "source.fixAll.eslint": true
},

2. My Dev dependencies include:

    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier-eslint": "^9.0.0",

3. I have a prettier.config.js file
4. My .eslintrc.js file includes:

extends: ['airbnb', 'prettier'],
plugins: ['react', 'jsx-a11y', 'import', 'react-hooks', 'plugin:prettier/recommended'],

Anyone have any idea on how to fix this or further debugging tests to do here? It's driving me nuts!

Answer 1

Follow these steps:

1. CTRL + SHIFT + P
2. Format Document (in pop-up bar)
3. Select Format Document
4. Select Configure Default Formatter...
5. Select Prettier - Code formatter

Done!

Answer 2

In VSCode settings, search for "Editor: Default Formatter" and set it to esbenp.prettier-vscode

Answer 3

On VScode go to Settings > Text Editor > Formatting

Then check the Format On Save checkbox.

Answer 4

Configuration has changed you need to add this into you vs-code settings:

According to the documentation: "You can enable Auto-Fix on Save for ESLint, TSLint or Stylelint and still have formatting and quick fixes"

"editor.codeActionsOnSave": {
  // For ESLint
  "source.fixAll.eslint": true,
  // For TSLint
  "source.fixAll.tslint": true,
  // For Stylelint
  "source.fixAll.stylelint": true
}

Answer 5

For me, using prettier+(svipas.prettier-plus) -- because the default prettier plugin is no good -- ONLY changing:

"editor.formatOnSaveMode": "modifications",

to

"editor.formatOnSaveMode": "file",

solved my problem.

Answer 6

in my case the issue was that the default formatter setting was not being used for typescript files. Looking at my settings.json I saw

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

After adjusting the value for [typescript] the issue was resolved.
I couldn't find a place Settings UI where the default formatter can be changed for TS only, but it would be a nice feature though.

Answer 7

Try to make your code prettier manually by pressing CTRL + SHIFT + P >>> Format Document. If your file is being formatted without any issues, it means that the issue lies in formatOnSave settings. Probably, you can try to make further debugging from there.

Answer 8

For formatonSave was already checked and the defaultFormatter was prettier ... when I switched into settings.json, it was like!!

"[javascript]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "prettier.disableLanguages": [ "js" ],

After changing it to

"[javascript]": { "editor.formatOnSave": true }, "eslint.autoFixOnSave": true, "prettier.disableLanguages": [],

it did work...

Answer 9

First check if Prettier works fine. You can try to format a single file using Shift + Cmd + P and Format Document. If this doesn't work then it is most likely an issue with Prettier extension. Disable and Enable Prettier extension from Extensions.

If Formant Document works fine on single file then the best way to resolve these type of issues is going to settings.json and looking up the config. I had an issue where the first few lines in settings.json had issues and hence the other settings like format on save (editor.formatOnSave) and defaultFormatter which were below the ill-formatted line wasn't working.

Answer 10

I tried checking the "format on save" box but it didn't do it for me, even prettier selected as a default formatter. Editing the settings' json file worked for me :

1. Open the command palette with ctrl + maj + p

2. Search 'open settings json'

3. Select the user option enter image description here

4. In the file look for "editor.defaultFormatter" for html (line 16 in my case)

5. Set its value to "esbenp.prettier-vscode" enter image description here

Done

Answer 11

I had to add a jsconfig.json file containing:

{
  "exclude": ["node_modules"]
}

to my app directory, and reload Visual Code, in order for Prettier to work. Also, I can't choose "Format Document With..." in the Visual Code command palette until I add this file.

Basically it tells Visual Code that the project is written in JavaScript (if I understand it correctly) and to exclude node_modules from intellisense.

This was after doing everything else people mentioned here.

Answer 12

I had one repo formatting on save and another not, in two different VSCode windows. The broken repo was using this filename:

// incorrect
.prettierrc.json

The functioning repo was using this filename:

// correct
.prettierrc

Dropping the .json extension corrected the problem.

Answer 13

I dont use prettier but What worked for me was , syncing my user with vs code.

What should be "on"

Answer 14

Here is my solution when using black to format Python scripts.

Ctrl+Shift+P and select Open Settings (UI), type Python Formatting in the search bar, and then:

• Python > Formatting: Black Path: Specify the path where black executable file is located.
• Python > Formatting: Provider: Modify none to black.
  • This change makes my editor to work. Somehow this setting would be reset by some extensions or careless operations.

Answer 15

If all of the above doesn't work for you, check your settings.json file and confirm the defaultFormatter set for Javascript.

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

In my own case, it was set "vscode.typescript-language-features" then I changed it to esbenp.prettier-vscode and it worked!