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

【问题标题】：Specify custom formatting for html tags in VS Code在 VS Code 中为 html 标签指定自定义格式
【发布时间】：2018-02-16 23:06:08
【问题描述】：

我喜欢以特定方式格式化的 html。例如使用 Telerik 的网格（可以有很多属性）我喜欢这样：

<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)">

如果我在 VS Code 中像这样格式化它并点击 Shift + Alt + F，格式化程序会删除我所有的自定义格式：

<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 个问题：

是否可以阻止 VS Code 重新格式化我的 kendo-grid 标签？
是否可以修改 VS Code 以按照我指示的方式格式化 kendo-grid 标签？

我尝试了什么（没有结果）：

将 kendo-grid 标签添加到 settings.json 文件中的 html.format.contentUnformatted 设置
将 kendo-grid 标签添加到 settings.json 文件中的 html.format.unformatted 设置

谢谢。

【问题讨论】：

标签： html formatting visual-studio-code

【解决方案1】：

在用户设置Preferences > User Settings 设置中

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

将使所有 HTML 标记的行为类似于您的示例。也可以设置

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

让它在保存和粘贴时自动工作。

【讨论】：