@betsys-eslint/eslint-plugin-angular-template-spacing

ESLint plugin that ensures your angular interpolations and pipes are consistent across the project

---

Requirements

We recommend using Node.js v16 as we do not support lower version of Node.js. Angular version 12 and later are supported.

Quick Start

Installing automatically

To install the configuration with all the necessary configuration changes, use the following:

npx @betsys-eslint/install plugin angular-template-spacing

To read more about our installation script visit: @betsys-eslint/install.
⚠️ This package currently works only with .eslintrc.json file. We plan to support other configuration files (.js and .yml) in the future.

Installing manually

You can install the plugin without using the installation script above, see the following:

npm install --save-dev @betsys-eslint/eslint-plugin-angular-template-spacing

after installation, add the plugin to you ESLint config:

{
  // Root configuration of your Angular project
  "overrides": [
    {
      files: ["*.html"],
      // Locate configuration for your HTML files
      "plugins": [
        // ...
        "@betsys-eslint/angular-template-spacing"
      ],
      "extends": [
        // ...
        "plugin:@betsys-eslint/angular-template-spacing/recommended"
      ]
    }
  ]
}

Specific rules

@betsys-eslint/angular-template-spacing/interpolation

We follow common ESLint configuration practices:

• First parameter is ESLint severity level
• Second parameter
  • always requires whitespace between | (pipe) character
  • never disallows whitespace between | (pipe) character
• Third parameter is an object with additional options
  • allowNewlines option:
    • defaults to true
    • false disallows newlines to be treated as "whitespace"
    • true allows newlines to be treated as "whitespace"

Example:

{
  "@betsys-eslint/angular-template-spacing/interpolation": ["error", "always", { "allowNewlines": false }] 
}

@betsys-eslint/angular-template-spacing/pipe

We follow common ESLint configuration practices:

• First parameter is ESLint severity level
• Second parameter
  • always requires whitespace between | (pipe) character
  • never disallows whitespace between | (pipe) character

Example:

{
  "@betsys-eslint/angular-template-spacing/pipe": ["error", "always"] 
}

Included configurations

Instead of configuring the rules yourself, you can use one of our included configurations listed below.

Recommended (@betsys-eslint/angular-template-spacing/recommended)

{
    "@betsys-eslint/angular-template-spacing/interpolation": ["error", "always", { "allowNewlines": false }],
    "@betsys-eslint/angular-template-spacing/pipe": ["error", "always"]
}