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:
*.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 |