Prettier-vscode: Add the missing option to disable crappy Prettier VSCode HTML formatter

[micobarac]

Latest version of Prettier - Code formatter [1.7.0] makes crappy HTML formatting when VSCode Format on Save is active.

Please, either allow through the Prettier VSCode settings to disable its bad HTML formatter and let the built-in HTML formatter do its thing or disable Prettier VSCode HTML formatter until you make it decent enough to be useful.

Original:

<!-- Name -->
<mat-form-field>
  <input matInput type="text" formControlName="name" required placeholder="{{ 'OpenFunctionTranslation.Name' | translate }}"
    autocomplete="off" />
</mat-form-field>
<small *ngIf="name.touched && !name.value.length" class="mat-warn">
  {{ 'OpenFunctionTranslation.NameRequired' | translate }}
</small>
<small *ngIf="name.touched && !name.valid && name.value.length" class="mat-warn">
  {{ 'invalidNameFormat' | translate }}
</small>

Bad Prettier Formatting:

<!-- Name -->
<mat-form-field> <input matInput type="text" formControlName="name" required placeholder="{{ 'OpenFunctionTranslation.Name' | translate }}" autocomplete="off" /> </mat-form-field>
<small *ngIf="name.touched && !name.value.length" class="mat-warn"> {{ 'OpenFunctionTranslation.NameRequired' | translate }} </small> <small *ngIf="name.touched && !name.valid && name.value.length" class="mat-warn"> {{ 'invalidNameFormat' | translate }} </small>

I falsely accused VSCode for the issue. The initial issue was created here:

Format on save messes up original HTML file format

This way I can either stop using VSCode Format on Save or disable Prettier - Code formatter VSCode extension.

Btw, Typescript and SCSS formatters are flawless.

[micobarac]

Actually, this is a setting that disabled Prettier formatter for HTML files:

"prettier.disableLanguages": ["html"]

[micobarac]

Nevertheless, Prettier HTML formatting needs a huge makeover. Right now, it's useless.

[krokofant]

I've been noticing this for a couple of weeks now at least. It's horrible :(

[RobinMalfait]

@krokofant weeks? It was released 4 days ago...

[krokofant]

@RobinMalfait Well then, that is awkward. I might have stumbled upon the wrong issue.

Input code:

  <a [nzTitle]="'MainScreen' | translate" nzPlacement="bottom" nz-tooltip class="mainurl" [href]="mainUrl" [nzMouseEnterDelay]="0.5" [nzMouseLeaveDelay]="0">Hello World</a>

And formatting with prettier now renders:

    <a
        [nzTitle]="'MainScreen' | translate"
        nzPlacement="bottom"
        nz-tooltip
        class="mainurl"
        [href]="mainUrl"
        [nzMouseEnterDelay]="0.5"
        [nzMouseLeaveDelay]="0"
        >Hello World</a
    >

This doesn't look great. Not that the original looked great but formatting the elements like:

        >Hello World</a
    >

seems faulty. Maybe it's not.

[kurtommy]

this is the way to go

{
"editor.formatOnPaste": true,
"prettier.singleQuote": false,
"prettier.trailingComma": "none",
"prettier.disableLanguages": ["html"],
"editor.formatOnSave": true,
"editor.rulers": [110],
"html.format.wrapAttributes": "force",
"html.format.enable": true,
"html.format.wrapLineLength": 110
}
this will keep ts lint enabled while for html we use the standard vscode formatting

[CiGit]

Seems you found a way to disable formatter for HTML.

You may want to read https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

<a>Hello</a
>

may seem faulty but it's valid HTML. It may break some syntax highlighter.

@micobarac I would say you have a pretty high printWidth

There is some discussion about HTML formatting on prettier's repository https://github.com/prettier/prettier/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+HTML+whitespace+

HTML formatter is quite new (~ 1 week). Community feedback is somewhat expected.

I'll close that one as the initial issue (disable HTML formatter) has been answered: Option already exists

[github-actions[bot]]

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.