ESLint config Angular

It's a configuration on top of the standard @angular-eslint rules which enables stricter rules, adds some more plugins to ensure a smooth development process by elimination topics to discuss during PR reviews.

There are extra rules that enforce better consistency in *.html and *.ts files, and common pitfalls when working with RxJS.

Quick start

Before using this package, you should have angular-eslint set up.

Install the package

npm i -D @epam/eslint-config-angular

Rename your eslint.config.js to eslint.config.mjs and replace the contents with following

import eslintConfigAngular from "@epam/eslint-config-angular";

export default [
  ...eslintConfigAngular,
  {
    files: ["**/*.ts"],
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
    },
  },
];

Opting-out from rules

Follow the regular ESLint approach for opting-out from rules you don't like or want to make adjustments for.

Rules and plugins

This package does not provide rules of its own, it only extends and applies extra rules from packages:

• @angular-eslint
• eslint
• @typescript-eslint
• rxjs plugin
• sonar plugin

*.html

Extends:

• @angular-eslint/template/recommended
• @angular-eslint/template/accessibility

Rule	Value
@angular-eslint/template/no-duplicate-attributes	error
@angular-eslint/template/elements-content	error
@angular-eslint/template/alt-text	error
@angular-eslint/template/label-has-associated-control	error
@angular-eslint/template/no-positive-tabindex	error
@angular-eslint/template/valid-aria	error
@angular-eslint/template/banana-in-box	error
@angular-eslint/template/eqeqeq	error { allowNullOrUndefined: true }
@angular-eslint/template/no-any	error

*.ts

Extends:

• eslint/recommended
• typescript-eslint/recommended
• typescript-eslint/stylistic
• sonarjs/recommended
• angular-eslint/tsRecommended
• rxjs/recommended

Rule	Value
rxjs/no-ignored-observable	error
rxjs/no-unbound-methods	error
rxjs/throw-error	error
rxjs/no-compat	error