How to fix prettier messing up your HTML on save

Jun 29, 2022

Fix Prettier messing up your HTML on save in VS Code by setting the HTML editor.defaultFormatter to vscode.html-language-features in settings.json.

~~~

Like everyone I use Prettier to format my JS files.

I’ve had some issues with Prettier formatting my HTML like this:

HTML code with improper line breaks and indentation caused by Prettier formatting

The solution I found is to add this to your settings.json file to tell VS Code to use the default HTML formatter instead of Prettier:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
}

~~~