Add the missing option to disable crappy Prettier VSCode HTML formatter
See original GitHub issueLatest 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:
- Created 5 years ago
- Reactions:13
- Comments:8 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
Actually, this is a setting that disabled Prettier formatter for HTML files: