WebStorm中Angular模板代码样式设置及属性排序自定义方法

1. 为Angular模板应用代码样式 #

1. 打开WebStorm设置：Windows/Linux路径为File > Settings，Mac路径为WebStorm > Settings；
2. 导航到Editor > Code Style > HTML，切换至Angular标签页；
3. 在此配置模板的缩进、换行、空格、属性对齐等样式规则，比如设置属性是否强制换行、缩进字符数；
4. 配置完成后点击Apply保存，选中目标模板代码，按Ctrl+Alt+L（Windows/Linux）或Cmd+Opt+L（Mac）执行代码重排，即可应用设置好的样式。

2. 自定义Angular模板属性排序规则 #

可以完全自定义Angular模板中HTML属性的排序顺序，步骤如下：

1. 进入Editor > Code Style > HTML设置页，切换到Attributes标签；
2. 点击Attribute order下方的Configure按钮，打开属性排序配置窗口；
3. 在Custom order区域，通过Add按钮添加规则，并按期望顺序拖拽调整：
   • 结构指令：添加*（匹配所有*开头的结构指令，如*ngIf），移至最顶部；
   • 动画指令：添加@*（匹配所有@开头的动画属性，如@fade）；
   • 模板引用变量：添加#*（匹配所有#开头的模板变量，如#myComponent）；
   • 原生属性：先添加class（单独指定常用原生属性），再添加*匹配其他原生属性；
   • 属性绑定：添加[*]（匹配所有方括号属性绑定，如[bar]）；
   • 双向绑定：添加[(*)]（匹配所有双向绑定，如[(ngModel)]）；
   • 事件绑定：添加(*)（匹配所有圆括号事件绑定，如(click)）；
4. 确认顺序后点击OK保存，执行代码重排即可得到预期的属性排序效果。

示例对比 #

<!-- bad -->
<my-app-component
  (click)="onClick($event)"
  [(ngModel)]="fooBar"
  class="foo"
  #myComponent
  [bar]="theBar"
  @fade
  foo="bar"
  *ngIf="shouldShow"
  (someEvent)="onSomeEvent($event)"
></my-app-component>

<!-- good -->
<my-app-component
  *ngIf="shouldShow"
  @fade
  #myComponent
  class="foo"
  foo="bar"
  [bar]="theBar"
  [(ngModel)]="fooBar"
  (click)="onClick($event)"
  (someEvent)="onSomeEvent($event)"
></my-app-component>

内容的提问来源于stack exchange，提问作者Rex jeong