Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Explicit/implicit prefix properties, variables and template references with this. in Angular HTML templates.
There is no functional reason to start properties with this. It is solely aesthetic. But by giving developers the choice to apply it or not, the code will look inconsistent.
Explicit means that properties, variables and template references start with this., like: <test *ngIf="this.foo">{{this.bar}}</test>.
Read more about this rule in the documentation.
You'll need to have an Angular project with the following packages installed:
- ESLint - version 7 and 8 are tested.
- Angular ESLint - version 13, 14 & 15 & 16 are tested.
Install eslint-plugin-angular-template-consistent-this:
npm install eslint-plugin-angular-template-consistent-this --save-devAdd eslint-plugin-angular-template-consistent-this to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
// ...
{
"files": ["*.html"],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
+ "plugins": ["angular-template-consistent-this"],
"rules": {
// ...
}
}
]
}Then configure the rules you want to use under the rules section. The recommended configuration is:
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
// ...
{
"files": ["*.html"],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
"plugins": ["angular-template-consistent-this"],
"rules": {
+ // Prepend properties with `this`.
+ "angular-template-consistent-this/eslint-plugin-angular-template-consistent-this": [
+ "error",
+ {
+ "properties": "explicit",
+ "variables": "implicit",
+ "templateReferences": "implicit"
+ }
+ ]
}
}
]
}