HTML Suddenly formatting improperly

[silverjerk]

Prettier is suddenly formatting html in a strange way, adding closing slashes to <hr> elements, dropping brackets/carats to the next line, leaving single > on their own line. In the image below, this happened with much more than the anchor tag and was consistent on several other elements, but after formatting to take the product-specific code out of the html, some of the formatting corrected itself; it seems to be based on length of copy and other factors, but without being able to nail down what's happening, or why it started happening recently, not sure how to configure preferences to remove this behavior.

[sibiraj-s]

this should be moved to https://github.com/prettier/prettier

[silverjerk]

Apologies for not clarifying @sibiraj-s. I'm not seeing these issues in other editors using Prettier. This is only happening in VSCode, and was a recent issue, so I assumed it could possibly be related to prettier's VSCode plugin. If you'd still recommend I move the issue, I will happily do so. Thanks for the reply!

[sibiraj-s]

Oh. Do u have prettier installed either as a dependency or devDependency in your workspace?

[YvesAmmann]

Same issue here.

[mausworks]

Also having problems with how VSCode is formatting HTML after a recent update (of VSCode).

For instance, I'd expect to be able to format my nav, as such:

<nav>
  <a href="/">Home</a>
  <a href="/foo">Foo</a>
  <a href="/bar">Bar</a>
</nav>

However, in reality, something like this occurs:

<nav>
  <a href="/">Home</a> <a href="/foo">Foo</a>
  <a href="/bar/">Bar</a>
</nav>

Which personally, looks super-broken to me.

I'm not sure whether this a VSCode-issue, or if this is a prettier-issue, or maybe both.

I've also seen @silverjerk's issue occur, but it seems to fix the "line break-issue", and honestly, I'm not sure which type of formatting is worse.

[karocksjoelee]

how to fix this ?

[mausworks]

@karocksjoelee, I turned of prettier, seems to be the only solution as of now.

[sa-adebayo]

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

[events-jonas-chrisw]

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?

[seangwright]

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.

[garrett-thompson]

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
    }

[drawcard]

I too am having a frustrating time with this and any .html file I'm working on - this issue may be related prettier/prettier#5582

[silverjerk]

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.

[eaglejs]

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

[m1chaeldg]

I am using 1.7.3 to solve this issue.

[eaglejs]

I don't think 1.7.3 fixes this issue. I've tested this on multiple computers with different setups using this plugin and I get the same results.

1.7.3 does this to basic html:

<mat-error
  *ngIf="
    subjectForm.controls.lastName.errors &&
    subjectForm.controls.lastName.errors.required
  "
  >Last Name is required.</mat-error
>

1.6.1 does this to basic html:

<mat-error *ngIf="
    subjectForm.controls.lastName.errors &&
    subjectForm.controls.lastName.errors.required
  ">Last
  Name is required.</mat-error>

1.7.3 should not have that trailing '>' at the very bottom, it is very confusing. 1.6.1 is still not much better, but it's mostly the a tags that it mangles the worst.

feel free to copy and paste this code in and see what it does in 1.7.3 for you. Perhaps it's a plugin collision issue.

[cloges4]

I see the same issue with the " />", I reverted prettier back to version 1.6.1 everything works fine now.

[sa-adebayo]

@cloges4 which of the packages did you change to 1.6.1? Isn't the latest version of prettier according is 1.15.3?

[sa-adebayo]

Oh, I see! You were referring to the vscode extension. 😉

[sa-adebayo]

Not so cool to see this breaking change not attended to all these while though. Does anyone have an idea of what line(s) of code could be responsible for this, we could raise a PR.

[JoshMelton]

No clue what the issue was (still encountered it), I needed something set up quickly, so went with the Beatify vs code option to format html, and Prettier for fomat everything else, would love it under one tool though.

[CiGit]

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.

[events-jonas-chrisw]

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.

[drawcard]

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

[coliff]

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

But it works great for JS, CSS, Markdown etc. Instead of stopping using prettier altogether just add a .prettierignore in your projects root with *.htm *.html so it doesn't format HTML.

[drawcard]

Thanks @coliff - trouble is, although I do format JS / CSS on occasion, 90% of the time I'm wanting to format HTML so it's properly indented & readable. It's a bit messy having to install a 2nd plugin just to handle that. Anyway it's all good, there are alternatives.

[events-jonas-chrisw]

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

But it works great for JS, CSS, Markdown etc. Instead of stopping using prettier altogether just add a .prettierignore in your projects root with *.htm *.html so it doesn't format HTML.

@coliff the problem is vue component template files, which contain html, js and css... so ignoring .vue files ignores everything obviously.

[brickbones]

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.

[events-jonas-chrisw]

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...

[TMorville]

Same problem when using Prettier in Neovim via.

" Prettier
Plug 'prettier/vim-prettier', {
  \ 'do': 'yarn install',
  \ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql', 'markdown', 'vue', 'yaml', 'html'] }

[prisar]

@mellogarrett it helped me to exclude html file from auto save

[greenuns]

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.

[arajay]

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

[oneness0]

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

[ntziolis]

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.

[androidovshchik]

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

Look this option here
https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

[bartek-szymanski]

About HTML formatting we should remember that we have inline and block elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

If there is a new line between inline elements which for example <a> are by default then in the browser we will see unexpected space between them.

Default formatting for inline elements should be without any whitespace between, even though it is not readable:

<nav>
  <a href="/">Home</a><a href="/foo">Foo</a><a href="/bar/">Bar</a>
</nav>

In case our inline elements are actually set in CSS to be block then we can use white space:

<nav>
  <a href="/">Home</a>
  <a href="/foo">Foo</a>
  <a href="/bar/">Bar</a>
</nav>

[jinicode]

I had the same problem install the Eslint extension and reload the VS code ,also install Prettier and disable Bautify formatter.
This solved my problem

[GregorSondermeier]

Just a heads up:
This happens in IntelliJ as well. Currently using IntelliJ IDEA 2019.2.2 (Ultimate Edition).

We are using Prettier to automatically format our angular code. But it is intended only for *.ts files. However, this intention is not enforced by the .prettierrc and the .prettierignore. As a result, when a developer uses the shortcut [CTRL]+[ALT]+[SHIFT]+[P] to format the current file with Prettier, and the current file happens to be a *.component.html file, the result may contain weird looking code blocks like this:

<div
  *ngIf="
    someForm.controls.someElement.invalid && form.submitted
  "
>
  <mat-error
    *ngIf="someForm.controls.someElement.hasError('required')"
    data-test="some-element-required-error"
  >
    {{
      'TRANSLATION_KEY' | translate
    }}
  </mat-error>
</div>

Why am I writing this here in the prettier-vscode repo? Because I see similarities and it seems like the key issue comes from Prettier itself and not from the prettier-vscode plugin. (EDIT: A discussion about this is going on here: prettier/prettier#5377)

For now, I will probably exclude *.html files in the .prettierignore and look for other ways to autoformat html files.

[dpip]

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" }

[tvvignesh]

@CiGit Requesting you to open this issue. This is very annoying, especially when you are developing web components. You write all the code in ts or js files including html and js and you ignoring them ignores everything.

I won't be able to switch out of VSCode anytime since I rely heavily on it. And having prettier work well there would be great. Kindly help.

Right now, my code is getting formatted like this everywhere:

<ion-col size="10" size-md="6">
                            <ion-card>
                                <ion-card-header>
                                    <!-- <ion-card-subtitle>Today, 12th December 2019</ion-card-subtitle> -->
                                    <ion-card-title
                                        >Add Channel 1</ion-card-title
                                    >
                                </ion-card-header>
                                <ion-card-content>
                                    Timeline here</ion-card-content
                                >
                            </ion-card>

[ntotten]

This is an issue or feature request for the Prettier library itself rather than the VS Code extension for prettier. Please open an issue at https://github.com/prettier/prettier.

[sindrenm]

There's already some talk about it over at prettier/prettier#5377.

[KarmaBlackshaw]

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

Thanks man!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.