Question

我正在寻找一种VS Code插件，该插件可通过以下方式格式化我的HTML：

案例1

如果我所有的属性都适合同一行（在我指定的换行长度之内，例如80或100），则将所有内容都保留在同一行：

<!-- WHAT I WROTE -->
<div *ngIf="shouldShowThisThing" class="my-cool-class"></div>

<!-- FORMATS TO (in this case, don't do anything) -->
<div *ngIf="shouldShowThisThing" class="my-cool-class"></div>

<!-- SHOULD NOT FORMAT TO -->
<div
    *ngIf="shouldShowThisThing"
    class="my-cool-class">
</div>

<!-- SHOULD NOT FORMAT TO -->
<div *ngIf="shouldShowThisThing"
     class="my-cool-class">
</div>

案例2

如果我的属性不在同一行上，但是我指定了我想要标签名称旁边的第一个属性，则应将每个属性放在与第一个属性对齐的不同行上。

<!-- WHAT I WROTE -->
<input *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue" (click)="doSomething()" />

<!-- FORMATS TO -->
<input *ngIf="shouldShowThisThing"
       class="my-cool-class"
       [value]="someValue"
       (click)="doSomething()" />

<!-- SHOULD NOT FORMAT TO -->
<input *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue"
    (click)="doSomething()" />

<!-- SHOULD NOT FORMAT TO -->
<input
    *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue"
    (click)="doSomething()" />

案例3

如果我的所有属性都不在同一行上，但是我指定了我想要标记名称之后的行上的第一个属性，那么它应该使每个属性缩进两个制表符（如果一个制表符是2个空格，则应缩进4个空格）：

<!-- WHAT I WROTE -->
<input
    *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue" (click)="doSomething()" />

<!-- FORMATS TO -->
<input
    *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue"
    (click)="doSomething()" />

<!-- SHOULD NOT FORMAT TO -->
<input *ngIf="shouldShowThisThing"
       class="my-cool-class"
       [value]="someValue"
       (click)="doSomething()" />

案例4

如果属性不在同一行上，则结束标记应与开始标记对齐：

<!-- FORMATS TO -->
<my-component
    *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue"
    (click)="doSomething()">
</my-component>

<!-- SHOULD NOT FORMAT TO -->
<my-component
    *ngIf="shouldShowThisThing"
    class="my-cool-class"
    [value]="someValue"
    (click)="doSomething()"></my-component>

我已将Intellij配置为以这种方式格式化HTML，但我不知道如何使VS Code格式化程序以相同的方式工作。如果有人有任何指示，请告诉我！

适用于不同情况的格式的Visual Studio代码HTML格式程序

0 个答案: