How do you determine which formatter is being used for VS Code?

Question

If you have multiple extensions installed how do you determine which formatter is running on your document?

For instance I have a couple of HTML extensions that may format HTML but I'm not sure which one is actually formatting, or if multiple are. I'm not even sure which extensions may be contributing to the formatting honestly. Recently auto formatting in HTML and CSS have changed how they're formatting in ways that I do not care for, and I would like to know which extension is doing this so I may be able to change configuration or disable the extension. Currently I have something like 80-90 extensions so going through one by one is a ridiculously timely process that I would like to stay away from if there is a programmatic way of determining this. It seems that extensions have to register with the formatting service so that they can do their auto formatting, but I'm not sure if there's a way to debug, hook, or view those.

Answer 1

Starting with the 1.33 release (March 2019), attempting to format a file for which there are multiple formatters registered results in a popup like this:

Note that the notification is "silent" if formatting happened implicitly via "format on save" or "format on paste", meaning that you need to click the bell in the lower right for it to show up:

The Configure... menu then lists all the formatters available for the current language. One of them can be selected as a default formatter for Format Document and Format Selection:

Picking for instance "Prettier" here results in this being added to the global settings.json:

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

There are also two new commands for formatting a file with a specific formatter, Format Document With... and Format Selection With.... This can be useful for formatting a specific file with a formatter that's not set as the default formatter. The former is also available from the context menu:

Answer 2

In addition to the answer given by Gama11 You can got to settings.json on below given path

C:\Users\<username>\AppData\Roaming\Code\User\settings.json

I am using "prettier" formatter for my html files, also you can find the formatter been used for other extensions if configured.

Answer 3

The default-level formater mentioned in rofrol's answer will soon be better managed, from issue 126187

It should be deprecated and banished for the sanity of developers everywhere.

Few days ago I ventured off the path of JS/TS/CSS/HTML/JSON and thought I try VScode with something new, ReScript.

I installed the plugin https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode

But the formatting didn’t work.
Tried the same with a python formatter plugin, same problem.

After a little investigation I found that I had this configured at the top level of my settings.json. It also has a nice GUI pulldown.

"editor.defaultFormatter": "esbenp.prettier-vscode",

And this was apparently overriding the ReScript and python plugins.
It might have been overriding ALL plugins, even for languages that prettier is not even registered to use, which is a diabolical thing to do.

After some googling I found that I could add this and fix my problem

"[rescript]": {
"editor.defaultFormatter": "chenglou92.rescript-vscode"
}

Or I could just set defaultFormatter back to null and let the plugins take over.

But I was wondering how many users have had this same problem? And how many plugins have to deal with this? And why did I think adding a defaultFormatter to the top level was a good idea?

Well, with VSCode 1.61 (Sept. 2021), this will now show a modal dialog.
The "Configure" action will make you configure a default formatter for that specific language, not for all languages.
See commit afc8ab1