Plugin that offers spacing possibilities in Angular's templates using ESLint. You can set the spacing rules around interpolation and pipes.
In order for this plugin to work, you have to have the peer dependencies installed:
@angular-eslint/eslint-plugin-template
>= v12.0.0
@angular-eslint/tempalte-parser
>= 12.0.0
@angular/complier
>= 12.0.0
eslint
^8.0.0
In order to install plugin in your repository run:
npm install --save-dev eslint-plugin-angular-template-spacing
Add plugin to the array of plugins for eslint
{
"plugins": [
"angular-template-spacing"
]
}
Add the rules:
You can extend the recommended set of rules which ensures spaces in interpolation statements and pipes.
{
"extends": [
"plugin:angular-template-spacing/recommended"
]
}
Example of correct usage of recommended rules
<div>{{ 'My text' }}</div>
<div>{{ computedText | pipe }}</div>
<div>{{ numericVariable | pipe1 | pipe2 }}</div>
<div>{{ numericVariable | pipe:'pipe-arguments' }}</div>
<div>{{ numericVariable | pipe1:'pipe1-arguments' | pipe2:'pipe2-arguments' }}</div>
<my-component [a-directive]="value | pipe"></my-component>
Or add the specific rules yourself
{
"rules": {
// Checks the spacing before and after the pipe
// "always" => "value | pipe"
// "never" => "value|pipe"
"angular-template-spacing/pipes": ["off|warn|error", "always|never"],
// Checks the spacing at the begging and at the end of interpolation
// "always": "{{ value }}"
// "never": "{{value}}"
// "always" with "acceptWhitespaces: true":
// "{{
// example
// }}"
"angular-template-spacing/interpolation": ["off|warn|error", "always|never", { "acceptWhitespaces": true|false }]
}
}