question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add the missing option to disable crappy Prettier VSCode HTML formatter

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:13
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
kurtommycommented, Nov 15, 2018

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

7reactions
micobaraccommented, Nov 13, 2018

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

"prettier.disableLanguages": ["html"]
Read more comments on GitHub >

github_iconTop Results From Across the Web

Disable onsave formating for .ejs files in visual studio code
To disable that setting, go to Preferences, and in the search bar type "format on save". Find the setting.
Read more >
Automated code formatting with Prettier
1. Install the Prettier VS Code plugin. Open the Command Palette (under the View submenu, or using Cmd+Shift+P on Mac and Ctrl+Shift+P on ......
Read more >
Using Prettier and ESLint to automate formatting and fixing ...
Learn how to use ESLint and Prettier together to automatically format and fix JavaScript code in your projects.
Read more >
November 2020 (version 1.52) - Visual Studio Code
Showing option to disable all dependent extensions when disabling an extension ... If the issue is gone, the bad extension must have been...
Read more >
VS Code Extensions for HTML | CSS-Tricks
It's most useful when you need to scroll up or down to find where the matching tag is. Prettier. Prettier does work on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found