Vscode: Format on save messes up original HTML file format

[micobarac]

• VSCode Version:
  1.28.2 (1.28.2)

• OS Version:
  macOS Mojave 10.14.1
  Windows 10 x64

Steps to Reproduce:

1. Create new or edit an existing HTML file with new lines and indenting
2. Save HTML file with Format on Save active
3. Most of the time the VSCode compacts some parent tags into one line tags and messes up the original HTML file format. Some other tags are split over multiple lines. Sometimes, this problem doesn't happen when hitting the save in VSCode.

Example:

Original HTML code:

<div class="navbar-item">
  <div class="control has-icons-right">
    <input class="input is-rounded is-secondary-focus has-text-white is-borderless" type="text" placeholder="Search..."/>
    <span class="icon is-small is-right has-text-white"> 
      <i class="sl sl-icon-magnifier"></i> 
    </span>
  </div>
</div>

Messed-up code:

      <div class="navbar-item">
        <div class="control has-icons-right">
          <input
            class="input is-rounded is-secondary-focus has-text-white is-borderless"
            type="text"
            placeholder="Search..."
          />
          <span class="icon is-small is-right has-text-white"> <i class="sl sl-icon-magnifier"></i> </span>
        </div>
      </div>

Does this issue occur when all extensions are disabled?: Yes

[zymr-keshav]

same issue here

vs code v 1.29.0
macOS v _10.13.6_ High Sierra

• No HTML formatter extension installed/enabled

settings
_Format On Save: Disabled_

now when I make any change in HTML file and save (⌘ + S) it changes HTML semantics weirdly and it turned 1 line of HTML into 10 lines and each line have single HTML attribute, see this image

[phl3x0r]

This started happening to me as well. Any workarounds?

[micobarac]

I must turn off Format On Save until it gets fixed. :(

[zymr-keshav]

I have disabled all extensions and it started working fine but do not know which is the culprit and obviously, we need those extensions for our ease and help.
in my findings, Prettier extension is the cause of this behavior

[micobarac]

Actually, Prettier - Code formatter extension was the only one active and was causing all the problems.

Sorry VSCode guys!!!

[zymr-keshav]

found the workaround. increase the value of "printWidth" property in _.prettierc_ file.

furthermore, I have checked the same with https://prettier.io/playground/

new .prettierrc

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "css",
    "printWidth": 300, << changed this from 80 to 300
    "proseWrap": "preserve",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "useTabs": false,
    "tabWidth": 4
}

[micobarac]

I have some pretty long HTML tags. Setting printWidth to 300 didn't solve the problem :(.

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>

[zymr-keshav]

Yes. I also feel the same. It works only for a few files. Can you Please reopen this issue and link on prettier issue page too

[micobarac]

Add the missing option to disable crappy Prettier VSCode HTML formatter

[micobarac]

Is there an option in the Prettier VSCode settings to disable its bad HTML formatter and let the built-in formatter work? I went through the docs and couldn't find any...

[micobarac]

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

"prettier.disableLanguages": ["html"]

[zymr-keshav]

I also tried all available options in vs code settings by keyword "word wrap" and tried various combination but no luck

[micobarac]

Use the above setting in VSCode settings.json file. It required a restart of VSCode in my case to make it active, I don't know why. This way it reactivates the built-in HTML formatter which works fine enough. I just hope the Prettier formatter will get fixed any time soon.

[zymr-keshav]

Yes, you are right. I did the same and modified these settings in settings.json

"prettier.disableLanguages": [
    "html"
  ],
 "html.format.enable": true,
"editor.wordWrap": "off",
"html.format.indentInnerHtml": true

[vscodebot[bot]]

This issue is caused by an extension, please file it with the repository (or contact) the extension has linked in its overview in VS Code or the marketplace for VS Code. See also our issue reporting guidelines.

Happy Coding!