Vscode: Format on Save (prettier) stopped working with latest update

[ivanjeremic]

Format on Save (prettier) stopped working with the latest update

Multiple time reinstalled Prettier, and checked the settings, it happened right after the update of VSCode.

https://gyazo.com/f07a3bfd0733edeed2a8d213fc3d21ac

[nofear-js]

Same problem

[j-francisco]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

[FranciscoDiMarzo]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

Worked for me, thank you!

[pgmoir]

Yes, it worked as default formatter, but surely I shouldn't have to set default formatter for vscode. It should be on a project by project basis.

[jannomeister]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

This worked for me also but there's some scenarios where I just want prettier for a specific project and not globally 😢

[nicolasrouanne]

Same for me, selecting prettier as default formatter for _VSCode_ works, but this prevents from working with other languages. I'm using ruby as well, and I've got the same problem with rubocop formatter: it stopped working as of 1.50.0.
And I can't have 2 different default formatters globally for VSCode.

[AlissonRS]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

In case anyone is having issues finding the option @j-francisco explained above:

File -> Preferences -> Settings (for Windows)
Code -> Preferences -> Settings (for Mac)

Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.

[MichelKansou]

@AlissonRS Thx

[iNishant]

The above solution by @j-francisco and @AlissonRS fixes the prettier issue but for me, but all other language settings have been messed up too. For python, we use black formatter and now that's not working because I have selected prettier as the default formatter. If I select black as default then prettier won't work on js files. Seems like auto detect language and formatter is not working. Any idea how I could fix this?

[madsh93]

I understand the frustation from people who are dependent on this. I use other tools such as Headwind, which now does not work.

[kud]

Same here. Is it a breaking change from VS Code or is it prettier which changed its namespace/code name?

[ivanjeremic]

I fixed it and now it broke again from alone, this has no effect https://github.com/microsoft/vscode/issues/108447#issuecomment-707236252 Edit Fixed it again by directly searching Format on Save and activate it.

[jrieken]

So, what's the issue here? Is it that the settings (editor.defaultFormatter) isn't alive anymore? Or is it that the setting for format on save (which is off by default) (editor.formatOnSave) isn't set?

[AlissonRS]

@jrieken it's not related to editor.formatOnSave, the problem is prettier stopped working, even manual formatting (SHIFT + ALT + F) wasn't working, and it worked again after setting editor.defaultFormatter to prettier. What is not clear to me is if new VS Code just accidentally removed editor.defaultFormatter (updated it to null), or if editor.defaultFormatter has always been null but previous VS Code versions were able to handle it properly and still make prettier work.

[jrieken]

What is not clear to me is if new VS Code just accidentally removed editor.defaultFormatter (updated it to null), or if editor.defaultFormatter has always been null but previous VS Code versions were able to handle it properly and still make prettier work.

Yeah, that's the question. Out of the box, editor.defaultFormatter is null. Also, note that the setting can be configured per language - something the UI doesn't support and that needs the JSON-based editor

[ivanjeremic]

So, what's the issue here? Is it that the settings (editor.defaultFormatter) isn't alive anymore? Or is it that the setting for format on save (which is off by default) (editor.formatOnSave) isn't set?

Both in my case, first the editor.defaultFormatte was null, after I fixed it one day later the (editor.formatOnSave) was not active anymore.

[jrieken]

@ivanjeremic Do you use settings sync?

[ivanjeremic]

@ivanjeremic Do you use settings sync?

Yes I do.

[kud]

I don't any settings sync and yeah my editor.defaultFormatter was null instead of esbenp.prettier-vscode. Maybe they changed their codename.

Anyway, here, since I set the right formatter, I'm good. 👍🏻

[ap00rv]

I am experiencing same behavior as @nicolasrouanne . If I set prettier as formatter in user settings, then only it works. If I set it only in workspace settings for my TS project, it does not work. This isn't ideal for people working on languages other than TS/JS.

[jrieken]

@ap00rv I have tried that and I cannot reproduce. I have prettier installed and configured to be the default formatter for typescript-files and format on save works for me.

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

Can you (or someone) share reproducible steps with me?

[ap00rv]

Hi @jrieken , can you try using the above settings only at workspace level ( default formatter in user setting should be null) and then see what happens ?

[jrieken]

Yeah, that's what I have.

[ap00rv]

ok, my apologies. It is working for me now after setting the following in workspace setting only . Sorry for the trouble.

"editor.codeActionsOnSave": {
      // For ESLint
      "source.fixAll.eslint": true
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

[dlsso]

All my coworkers and I are on VS Code 1.50.1 and Prettier extension 5.7.1, but some are seeing the issue and some not, so something else is at play here.

[ap00rv]

@dlsso for those of your colleagues facing issues, you may want to check if the default formatter setting in workspace is being overriden somewhere else. Thats what happened in my case. ESlint linting should be configured using different option as given here

[dlsso]

Good thought, but I'm not using any linter plugins so I don't think that can be it. Setting default as AllisionRS suggested did work for us, so it's not the end of the world. Still curious to know what caused it though.

[ledmirage]

I raised similar issue for beautify extension : https://github.com/microsoft/vscode/issues/108878

Following the method here and setting it as default fix for me on vscode 1.50.1

[depiction]

I'm also seeing the same issue. However, setting the default formatter at either the user or workspace level doesn't solve the problem. Format on save is still enabled at both the user and workspace level.

[David-Spooner]

I had same issue. Have been periodically (over the last week or so) looking here and there to try to figure out why prettier stopped working. Just today found this issue and was able to resolve by following suggestions in this thread above.

1) I opened settings and searched "default formatter". I noted that "Editor:Default Formatter" was set to null and that I had no option for prettier in dropdown.
2) I opened Json setting by clicking icon in top right corner of same settings screen:

3) I added the following lines to my json settings:

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

I took those lines from this page: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[ihojmanb]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

In case anyone is having issues finding the option @j-francisco explained above:

File -> Preferences -> Settings (for Windows)
Code -> Preferences -> Settings (for Mac)

Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.

this one made it for me!

[ap00rv]

i think the only thing that needs investigation here is that whether VSCode's default preference of workspace settings over user settings is working properly as mentioned here.

Workspace settings override user settings.

cc @jrieken

[yoyo930021]

I'll provide more information.
Vetur get a issue about auto formatting not working. https://github.com/vuejs/vetur/issues/2388
But if you go to the settings and turn the format off and on, it will work.

In vetur, we will register DocumentFormattingRequest in LSP when config change.
https://github.com/vuejs/vetur/blob/master/server/src/services/vls.ts#L142
There is also a comment that says that the LSP server will trigger once when it is started.

[jrieken]

Turns out this is from fixing https://github.com/microsoft/vscode/issues/106376. Before that change, VS Code would pick a random formatter (during format on save) when having multiple formatters and not having a configured default. I understand how this is unpleasant but I wouldn't call this a regression as before things have ben working by chance only.

Configure default formatter

As already suggested the correct thing to do is to configured the default formatter, best per language. The snippet below configures prettier (esbenp.prettier-vscode) as the default formatter for javascript

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

Why not show notification?

We actually do show a notification but only when save was triggered explicitly, e.g via the "Format Document/Selection" actions. Format on save is different as saving must not always happen from a user gesture - e.g one can use "save after delay" or "save on focus out". Notifications in such cases are unpleasant because they don't explain themselves well.

[depiction]

Changing the default formatter didn't work for me, but I found a solution.

Open any file, right-click and select Format Document. An error popup will likely appear saying that a formatter wasn't set or that the formatter could not be found. Click the popup then select prettier as the formatter.

After doing the above, format on save now works in every file for me.

[alancphilpott]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

This worked for me, thanks so much!

[octaviobarbosa]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

In case anyone is having issues finding the option @j-francisco explained above:

File -> Preferences -> Settings (for Windows)
Code -> Preferences -> Settings (for Mac)

Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.

fix for me, thx!

[haroldm2598]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

same thing to me brother thanks anyway for the idea

[karenying]

The above solution by @j-francisco and @AlissonRS fixes the prettier issue but for me, but all other language settings have been messed up too. For python, we use black formatter and now that's not working because I have selected prettier as the default formatter. If I select black as default then prettier won't work on js files. Seems like auto detect language and formatter is not working. Any idea how I could fix this?

@iNishant you should only set the default formatter for the workspace, and not the user?

[leonelRos]

for those having trouble with the formatting after setting up prettier as your default, you can change the way prettier formats
your code base on language. I have on JS now but If I am working in react I can switch it and there is no problem. Cheers!

[MattJLeach]

I was playing around with the same issue. Before trying to set prettier as the default formatter globally, or playing around with setting config stuff I thought I would try uninstalling the prettier extension and re-installing it (the good old turn it off and on again). This worked for me. I would suggest trying that first as it might reset some config or something 🤷‍♂️

[seekeroftacos]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

Thank you so much <3

[Alkaseem]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

works for me too, thanks

[Cfvillarroel]

I faced the same issue, I tried to set the default formatter on settings with no result, you have to edit the settings file as JSON.

I just added what some mentioned before:

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

Thanks everyone for your help!

[swati-sh]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

Worked for me

[krittiyaclark]

Default Formatter

Set it to null? It does not work for me. Other solutions please!

[Cfvillarroel]

Default Formatter

Set it to null? It does not work for me. Other solutions please!

Hi krittiyaclark, try to edit directly the settings as JSON

[krittiyaclark]

Turns out this is from fixing #106376. Before that change, VS Code would pick a random formatter (during format on save) when having multiple formatters and not having a configured default. I understand how this is unpleasant but I wouldn't call this a regression as before things have ben working by chance only.

Configure default formatter

As already suggested the correct thing to do is to configured the default formatter, best per language. The snippet below configures prettier (esbenp.prettier-vscode) as the default formatter for javascript

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

Why not show notification?

We actually do show a notification but only when save was triggered explicitly, e.g via the "Format Document/Selection" actions. Format on save is different as saving must not always happen from a user gesture - e.g one can use "save after delay" or "save on focus out". Notifications in such cases are unpleasant because they don't explain themselves well.

This solution is working for me. Thank you!

[swati-sh]

https://github.com/microsoft/vscode/issues/108447#issuecomment-707236252

On Wed, Oct 28, 2020 at 9:23 PM Carlos Villarroel [e-mail]
wrote:

Default Formatter

Set it to null? It does not work for me. Other solutions please!

Hi krittiyaclark, try to edit directly the settings as JSON

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/microsoft/vscode/issues/108447#issuecomment-718028524,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALRSB3I7TAV33P2JBZDLNK3SNA475ANCNFSM4SLAZZCQ
.

--
Regards,
Swati Shreya

[getsetgopi]

I tried all the above settings in user and workspace and still not formatting on save. Have to manually select prettier to format.

[David-Spooner]

Try searching in settings "format on save". There is a checkbox for that.
If it's not checked, it won't format on save.

On Wed, Oct 28, 2020 at 1:16 PM Gopinath Prasanna [e-mail]
wrote:

I tried all the above settings in user and workspace and still not
formatting on save. Have to manually select prettier to format.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/microsoft/vscode/issues/108447#issuecomment-718152465,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANYV5RK6Z3SVWNXBBUI7DWLSNBUZZANCNFSM4SLAZZCQ
.

[lialln]

Spent quite a while to dig around, and for me the issue is that i have the editor.formatOnSaveMode set to modifications (new feature recent released), ended up have to reset to file again.

  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file"

[sabeelmuttil]

Spent quite a while to dig around, and for me the issue is that i have the editor.formatOnSaveMode set to modifications (new feature recent released), ended up have to reset to file again.

  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file"

I think this is the best answer

[rickymm]

Spent quite a while to dig around, and for me the issue is that i have the editor.formatOnSaveMode set to modifications (new feature recent released), ended up have to reset to file again.

  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file"

This worked for me. Thank you so much! 🎉

[MedAliMhdh]

Hi! Make sure that your code doesn't contain any syntax errors!

[wolfian]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

This worked! Thank you so much!

[Navajocoding]

How to fix this?

[rained23]

does this extension support modifications mode?

[jayasme]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

In case anyone is having issues finding the option @j-francisco explained above:

File -> Preferences -> Settings (for Windows)
Code -> Preferences -> Settings (for Mac)

Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.

A life saver!!!

[jrieken]

Closing this as question - which the community answered quickly and correctly 👏 The bottom line is that a default formatter must be selected when having multiple available formatters.

[damechen]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

Awesome! Worked for me!

[lazyscriptbr]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

Thank you, worked for me!

[kdzapp]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

Thank you!! When prettier started working again I felt like I could breath again 😂

[bnitin92]

Thank you for the setting, worked for me.

[jahanner]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

@j-francisco Came in clutch, thanks

[BenHurMartins]

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

worked as a glove, thanks

[parnekov]

Put this fields to settings.json

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