Skip to content

jerone/eslint-plugin-angular-template-consistent-this

Repository files navigation

ESLint Angular Template consistent this
eslint-plugin-angular-template-consistent-this

npm GitHub Action: CI GitHub Action: Security Codecov SonarCloud: Quality Gate Status SonarCloud: Coverage SonarCloud: Maintainability Rating SonarCloud: Reliability Rating SonarCloud: Security Rating SonarCloud: Bugs SonarCloud: Vulnerabilities SonarCloud: Duplicated Lines (%) Snyk vulnerabilities GitHub issues MIT license Code style: Prettier

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.

Requirements

You'll need to have an Angular project with the following packages installed:

Installation

Install eslint-plugin-angular-template-consistent-this:

npm install eslint-plugin-angular-template-consistent-this --save-dev

Usage

Add 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"
+         }
+       ]
      }
    }
  ]
}


Stand With Ukraine