angularprettierlinter

Configure Linter and Prettier for HTML rule implementations


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=...
     [something]
     class="..." >

I would be very happy if you could give me ideas on how I can implement this!


Solution

  • 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"
    

    I hope this will help you out. Cheers 🥂