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 Selection and Format 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: 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 }, My Dev dependencies include: "eslint-config-prettier": "^6.5.0", "eslint-plugin-prettier": "^3.1.2", "prettier-eslint": "^9.0.0", I have a prettier.config.js file 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!

Follow these steps: CTRL + SHIFT + P Format Document (in pop-up bar) Select Format Document Select Configure Default Formatter... Select Prettier - Code formatter Done!

visual-studio-codeprettier

Hemal

Reputation: 2079

VS-Code Prettier Format On Save doesn't work

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:

enter image description here ]

I have my format on save checked in Settings:

Format on save

Format Document, Format Selection and Format 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:

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
},

My Dev dependencies include:

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

I have a prettier.config.js file
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!

Upvotes: 138

Answers (21)

AndreVitorio

Reputation: 980

Check if your project has a /.vscode/settings.json file!

Answering just because I'm feeling dumb after breaking my head.

I had a /.vscode/settings.json file in my project with editor.formatOnSave = false

So while trying to edit my default settings.json the formatOnSave option was being overwritten by the project one.

Upvotes: 1

Yasin

Reputation: 347

I went through all the solutions pointed here but yet not working.

What worked for me:

CTRL + SHIFT + P
select Format Document With...
select Configure Default Formatter...
select Prettier - Code formatter

Upvotes: 3

Hend El-Sahli

Reputation: 6752

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

Settings migration update

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "always"
}

Upvotes: 5

live-love

Reputation: 52494

Check if you have the Prettier extension installed

Make sure it's enabled.

Check the Prettier button on the bottom right of VS Code.

If there is an error it should be displayed in Red.

Check the Prettier dropdown at the bottom for errors.

Check if you have installed the packages: npm i

Check if you have these files in your root folder:

Upvotes: 0

tikej

Reputation: 322

To anyone still strugling with this, even after trying recommended answers:

Try CTRL + ,
Type: 'require config'
Uncheck Prettier: require config

if this still doesn't work you can try adding .editorconfig file at the top of your project

Upvotes: 1

Mederic

Reputation: 2019

For me this fixed it:

after an update prettier was begin used as the following:

"[typescript]": {
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},

It started working after changing it to:

"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Upvotes: 0

Géry Ogam

Reputation: 8087

For me the Prettier plugin for ESLint did not work in files using import type statements: Parsing error: '=' expected in `import type`

The solution was to upgrade these packages:

yarn upgrade prettier@latest eslint-plugin-prettier@latest eslint-config-prettier@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

Upvotes: 0

Hamed

Reputation: 891

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

Upvotes: 88

Fatimah

Reputation: 732

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!

Upvotes: 0

Hansimov

Reputation: 677

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.

Upvotes: 0

user21682423

Reputation: 1

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

What should be "on"

Upvotes: -2

Joe Lapp

Reputation: 2975

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.

Upvotes: 0

Just Born

Reputation: 11

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 :

Open the command palette with ctrl + maj + p
Search 'open settings json'
Select the user option enter image description here
In the file look for "editor.defaultFormatter" for html (line 16 in my case)
Set its value to "esbenp.prettier-vscode" enter image description here

Done

Upvotes: 1

rads

Reputation: 281

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.

Upvotes: 24

Shetty87

Reputation: 33

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.

Upvotes: 1

Julie Rankata

Reputation: 1124

On VScode go to Settings > Text Editor > Formatting

Then check the Format On Save checkbox.

Upvotes: 47

post4k

Reputation: 1

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.

Upvotes: 0

SgtPooki

Reputation: 11679

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

"editor.formatOnSaveMode": "modifications",

"editor.formatOnSaveMode": "file",

solved my problem.

Upvotes: 20

Goku

Reputation: 4380

Follow these steps:

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

Done!

Upvotes: 407

Laurent Loukopoulos

Reputation: 261

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
}

Upvotes: 26

Alexander Borisov

Reputation: 1199

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.

Upvotes: 14

VS-Code Prettier Format On Save doesn&#39;t work

Answers (21)

Settings migration update

Related Questions

VS-Code Prettier Format On Save doesn't work