在 VS Code 中为 html 标签指定自定义格式

Question

I like html formatted in a specific way. For example working with Telerik's grid (which can have many attributes) I like it like this:

 <kendo-grid [data]="myGrid" [height]="510" [pageSize]="prjState.take" [skip]="prjState.skip" [pageable]="true" [sortable]="true" [sort]="prjState.sort" [filter]="prjState.filter" [filterable]="true" (edit)="editHandler('prj',$event)" (cancel)="cancelHandler($event)" (save)="saveHandler('prj',$event)" (dataStateChange)="onPrjStateChange($event)">

If I format it like this in VS Code and hit Shift + Alt + F , the formatter deletes all my custom formatting:

 <kendo-grid [data]="myGrid" [pageSize]="prjState.take" [skip]="prjState.skip" [pageable]="true" (edit)="editHandler('prj',$event)" (cancel)="cancelHandler($event)" (save)="saveHandler('prj',$event)" [sortable]="true" [height]="510" [sort]="prjState.sort" [filter]="prjState.filter" [filterable]="true" (dataStateChange)="onPrjStateChange($event)">

2 questions:

1. Is it possible to stop VS Code from reformatting my kendo-grid tag?
2. Is it possible to modify VS Code so it formats kendo-grid tags the way i indicated?

What I tried (with no results):

• adding kendo-grid tag to html.format.contentUnformatted setting in settings.json file

• adding kendo-grid tag to html.format.unformatted setting in settings.json file

Thank you.

Answer 1

In the User settings Preferences > User Settings setting

"html.format.wrapAttributes": "force-aligned"

Will make all HTML tags behave like your example. You can also set

"editor.formatOnSave": true,
"editor.formatOnPaste": true

To make it work automatically on save and paste.