Lint Angular html 模板中的属性顺序

Question

目前我们在代码审查期间讨论属性的顺序。我们希望避免这种工作，并且认为由 IDE 或工具支持更好。

有人知道一个好的工具（如果不是最佳实践表的话）？

Answer 1

从 2022-2023 年的 Angular 版本 14 开始，我们可以使用@angular-eslint/template/attributes-order规则来排序 Angular 模板属性。

例如eslintrc.js：

...
{
 files: ['*.html'],
 extends: ['plugin:@angular-eslint/template/recommended'],
 rules: {
  '@angular-eslint/template/attributes-order': [
     'error',
     {
     alphabetical: false,
     order: [
       'STRUCTURAL_DIRECTIVE', // e.g. `*ngIf="true"`, `*ngFor="let item of items"`
       'TEMPLATE_REFERENCE', // e.g. `<input #inputRef>`
       'ATTRIBUTE_BINDING', // e.g. `<input required>`, `id="3"`
       'INPUT_BINDING', // e.g. `[id]="3"`, `[attr.colspan]="colspan"`, [style.width.%]="100", [@triggerName]="expression", `bind-id="handleChange()"`
       'TWO_WAY_BINDING', // e.g. `[(id)]="id"`, `bindon-id="id"
       'OUTPUT_BINDING', // e.g. `(idChange)="handleChange()"`, `on-id="handleChange()"`
     ],
   },
 ],
}
...