Lint the attribute order in angular html templates

Question

At the moment we discuss during code reviews the order of attributes. We want to avoid the effort und think it is better to be supported by IDE or tool.

Someone knows a good tool (and if not a best practices sheet)?

Answer 1

I've just found this VSCode extension to apply an order to the attributes of HTML, and it seems to work fine (although it messed up when I've selected the whole document... works good, though, when selecting only the element + attributes that I've wanted to sort):

Split HTML Attributes (Vue, React, Angular) --> https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes

Answer 2

From angular version 14 in 2022-2023 we can use @angular-eslint/template/attributes-order rule to order angular template attributes.

example for 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>`
       'CLASS',
       '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()"`
     ],
   },
 ],
}
...