@lego/eslint-config-angular-template

@lego/eslint-config-angular-template

Installation

Install this config package:

$ npm i -D @lego/eslint-config-angular
$ npm i -D @lego/eslint-config-angular-template

NOTE: @lego/eslint-config-angular-template have a peer-dependency on @lego/eslint-config-angular

Usage

Extend your eslint.json, and make sure @lego/eslint-config-angular-template has been added, but make sure it always after @lego/eslint-config-angular.

"overrides": [
  // other overrides omitted...
  {
    "files": ["*.ts"],
    "extends": ["@lego/eslint-config-angular"]
    // other properties omitted...
  },
  {
    "files": ["*.html"],
    "extends": ["@lego/eslint-config-angular-template"]
  }
]

with Prettier:

"overrides": [
  // other overrides omitted...
  {
    "files": ["*.ts"],
    "extends": [
      "@lego/eslint-config-angular",
      "@lego/eslint-config-prettier"
    ]
    // other properties omitted...
  },
  {
    "files": ["*.html"],
    "extends": ["@lego/eslint-config-angular-template"]
  },
  {
    "files": ["*.html"],
    "excludedFiles": ["*inline-template-*.component.html"],
    "extends": ["@lego/eslint-config-prettier"],
    "rules": {
      "prettier/prettier": ["error", { "parser": "angular" }]
    }
  }
]

NOTE: @angular-eslint/template rules must not be run together with Prettier. This is why they're are separated into their own overrides. See notes-for-eslint-plugin-prettier-users for more info

Overriding Rules

With the above eslint.json configuration example, you can still use or override already defined rules as such:

"overrides": [
  // other overrides omitted...
  {
    "files": ["*.html"],
    "extends": ["@lego/eslint-config-angular-template"],
    "rules": {
      "@angular-eslint/template/accessibility-alt-text": "off"
    }
  }
]

It's recommended to inspect the defined rule's configurations where the reasoning for the configuration lives. If a configuration could benefit more than just the project you're working on, feel free to create a pull request.