Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jerone/eslint-plugin-angular-template-consistent-this
ESLint Angular Template consistent this for properties, variables & template references.
https://github.com/jerone/eslint-plugin-angular-template-consistent-this
angular angular-template eslint eslint-plugin eslint-rule eslint-rules linting
Last synced: 11 days ago
JSON representation
ESLint Angular Template consistent this for properties, variables & template references.
- Host: GitHub
- URL: https://github.com/jerone/eslint-plugin-angular-template-consistent-this
- Owner: jerone
- License: mit
- Created: 2020-11-24T17:28:26.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-09T04:33:41.000Z (6 months ago)
- Last Synced: 2024-10-21T02:41:56.268Z (18 days ago)
- Topics: angular, angular-template, eslint, eslint-plugin, eslint-rule, eslint-rules, linting
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/eslint-plugin-angular-template-consistent-this
- Size: 812 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ESLint Angular Template consistent this
`eslint-plugin-angular-template-consistent-this`
[](https://www.npmjs.com/package/eslint-plugin-angular-template-consistent-this)
[](https://github.com/jerone/eslint-plugin-angular-template-consistent-this/actions/workflows/ci.yml)
[](https://github.com/jerone/eslint-plugin-angular-template-consistent-this/actions/workflows/security.yml)
[](https://codecov.io/gh/jerone/eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://sonarcloud.io/summary/new_code?id=jerone_eslint-plugin-angular-template-consistent-this)
[](https://snyk.io/test/github/jerone/eslint-plugin-angular-template-consistent-this)
[](https://github.com/jerone/eslint-plugin-angular-template-consistent-this)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/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: `{{this.bar}}`.
Read more about this rule [in the documentation](https://github.com/jerone/eslint-plugin-angular-template-consistent-this/blob/master/docs/rules/eslint-plugin-angular-template-consistent-this.md).
## Requirements
You'll need to have an Angular project with the following packages installed:
- [ESLint](https://eslint.org/) - version 7 and 8 are tested.
- [Angular ESLint](https://github.com/angular-eslint/angular-eslint) - version 13, 14 & 15 & 16 are tested.
## Installation
Install `eslint-plugin-angular-template-consistent-this`:
```sh
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:
```diff
{
"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:
```diff
{
"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"
+ }
+ ]
}
}
]
}
```
[](https://stand-with-ukraine.pp.ua)