Best practices regarding order of aurelia html attributes

Best Practices
1

Hi everyone
I stumped across this Prettier Plugin and thought about adding the aurelia specific html attributes like if.bind, repeat.for etc to my existing aurelia repos using the attributeGroup property provided by the plugin. Or maybe as a preset plugin itself (there are already support for vue and angular)

For Example:

"attributeGroups": [
  "^repeat.for$",
  "^if.bind$",
  "^click.delegate$",
  "$DEFAULT",
  "^data-cy"
]

Is there any best practices already defined about ordering of html attributes in aurelia? If not, how do you guys like the order of attributes?

2

I personally sort structural attributes first, 2nd all “normal” value bindings and at the end all “event” bindings:

repeat.for
if.bind
value.bind
other.bind
on-change.call
on-create.call
1 Like