In my Angular project, my team and I have committed to a few rules. These concern the formatting of the templates and the Sass stylesheets. In our project we use linter and prettier.
Now I'm wondering whether it is possible to configure these two tools in such a way that they can implement the rules automatically, or at least check and warn about their implementation.
The rules we agreed on are numerous, but this question will focus on two specific formattings:
<div ngIf*=isTrue class="myClass">
)<div ngIf=...
[something]
class="..." >
I would be very happy if you could give me ideas on how I can implement this!
For enforcing the order of attributes, you can use the @angular-eslint/template/attribute-order
rule in eslint. You would set the order like this:
"@angular-eslint/template/attribute-order": ["error", {
"order":
"ngIf",
"ngFor",
"class"
}]
This will enforce that class will come last.
For Multi-line attributes- Prettier has some options that can help:
"printWidth": 60,
"htmlWhiteSpaceSensitivity": "ignore"
printWidth
will wrap attribute across lines when they exceed a certain length.htmlWhiteSpaceSensitivity
set to ignore will allow splitting without introducing extra whitespace.I hope this will help you out. Cheers 🥂