Specify custom formatting for html tags in VS Code

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:

Is it possible to stop VS Code from reformatting my kendo-grid tag?
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.

CodeMonkey · Accepted Answer · 2018-06-05 07:58:04Z

2

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.

answered Jun 5, 2018 at 7:58

CodeMonkey

3,35128 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Specify custom formatting for html tags in VS Code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related