Prettier not formatting HTML in Visual Studio Code

Question

All I want to do is for Prettier to work on Visual Studio Code whenever I'm working on my HTML files, but nothing seems to work.

I made my default formatter Prettier.

I enabled Format on Save, Paste, and Type.

Whenever I use HTML files, I see that Prettier has the two double checkmarks on the bottom right of the screen.

However, my HTML content still remains unformatted.

Currently, my settings.json looks like this:

{
  "workbench.colorTheme": "Tomorrow Night Blue",
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.iconTheme": "material-icon-theme",
  "editor.formatOnType": true,
  "git.branchSortOrder": "alphabetically",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

I tried doing this:

{
  "workbench.colorTheme": "Tomorrow Night Blue",
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.iconTheme": "material-icon-theme",
  "editor.formatOnType": true,
  "git.branchSortOrder": "alphabetically",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"

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

}

but whenever I do that, the "[HTML]" is underlined in red and the file itself is shown to have a problem.

I'm a complete beginner, and I know almost nothing about coding or Visual Studio code. If anyone can help me, I'll be very thankful.

Answer 1

it seems working fine on my end with every settings you mentioned, try double checking your code first if you miss any closing tags because most of the time missing closing tag is the source of the problem.

On the other hand you could try using the default formatter rather than the prettier extension.

Right click --> Format Document with... --> HTML Language Features