prettier-vscode: HTML Suddenly formatting improperly

This is how prettier now prints HTML (this is quite new) Things are improving over time. You can play with htmlWhitespaceSensitivity

There is nothing we can do here

Or you can disable html and use an other formatter for it.

If you are ok with VSCode’s stock HTML formatting, these lines in settings.JSON worked for me:

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

this property in VSCode resolved my problems "prettier.htmlWhitespaceSensitivity": "ignore"

this is even worse when you have linting switched on (eslint with prettier plugin) - had to abandon prettier now - it’s become useless with its ridiculous formatting… one line in a vue template now split over 10 lines.

We also rely heavily on Prettier in VSCode for our projects.

We took @sa-adebayo’s suggestion, re-added Beautify to our workspace extensions, ignored all file types other than *.html using the beautify.ignore workspace setting and added *.html to .prettierignore.

So Beautify only formats html and Prettier formats everything else.

We combine these settings with VS Code’s Html formatting settings

"html.format.wrapAttributes": "force",
"html.format.wrapLineLength": 40,

We’ll keep this hacky setup until this issue is resolved.

I’m using the VS Code extension and it works for me if I use the Command Palette -> Format Selection. But format on save is a mess.

For me, the prettier node package works correctly but the Prettier VSCode extension is treating .html files like JSX or something…

It turned

<div
  appHeader
  class="header"
>
</div>

into

<div appHeader class="header"/>;

This breaks Angular…

For now, I’ve just updated my VSCode settings with this:

    "editor.formatOnSave": true,
    "[html]": {
        "editor.formatOnSave": false
    }

this really is bloody awful now. I’ve had to disable prettier. It turns html and vue templates into an absolute mess. Anyone got a decent alternative to prettier?

Pending a fix, I added *.html to my .prettierignore file to turn off formatting on .html files. I can’t endure turning off prettier.

Just a quick update; I struggled to find a solution to this for the past month or so. VSCode’s plugin is the only instance of Prettier that is affected for me. This has became even more of a critical issue whilst working with Angular templates, so I decided to utilize both @sa-adebayo and @seangwright suggestions and simply hacked together a solution until it is addressed.

I reverted mine back to 1.6.1, and that seems to correct that issue.

this property in VSCode resolved my problems "prettier.htmlWhitespaceSensitivity": "ignore"

This does change the behaviour in that each > is now on a separate line but does NOT resolve the issue for me.

I’m using the VS Code extension and it works for me if I use the Command Palette -> Format Selection. But format on save is a mess.

same here now…

how to fix this ?

this property in VSCode resolved my problems "prettier.htmlWhitespaceSensitivity": "ignore" Why can’t work on my vscode?

The vscode prettier extension “prettified” my index.html page with meta tags and all. the code below <meta property="og:image" content="html link" /> was changed to <meta property="og:image" content="html link" />

and this broke the meta tags. spent quite awhile wondering why the meta tag didn’t work. Only to find out prettier treated the html as if it’s a react component.

I’ve had to abandon this plugin too, which is a shame.

Same issue here.