@craftworks/eslint-config-angular NPM

@craftworks/eslint-config-angular

An ESLint config optimized for Angular.

Contains the configs of

and applies a custom config.

Following configurations are provided

@craftworks/eslint-config-angular
@craftworks/eslint-config-angular/unsafe-typing Use on top of @craftworks/eslint-config-angular; disables rules regarding ! and any which may be convenient for the developer if disabled, although they come with some degree of type safety reduction.
@craftworks/eslint-config-angular/tslint-config-angular-bridge Use on top of @craftworks/eslint-config-angular and [@craftworks/eslint-config-angular/unsafe-typing; allows easier migration by disabling a set of rules if you are coming from @craftworks/tslint-config-angular. It is recommended to avoid this config in the long run, as it won't be actively maintained.
@craftworks/eslint-config-angular/speed-up Use on top of @craftworks/eslint-config-angular; disables some of the rules that run for relatively too long compared to the value they provide.

Note that this setup is not set up for *.js files.

Installation

npm install @craftworks/eslint-config-angular --save-dev

Check for necessary peer dependencies.

Usage

.eslintrc.js

module.exports = {
  root: true,
  extends: ['@craftworks/eslint-config-angular'],
  overrides: [
    {
      files: ['*.ts'],
      parserOptions: {
        project: ['./tsconfig.lint.json'],
      },
      rules: {
        '@angular-eslint/component-selector': [
          'error',
          {
            type: ['element', 'attribute'],
            prefix: '[PREFIX]',
            style: 'kebab-case',
          },
        ],
        '@angular-eslint/directive-selector': [
          'error',
          {
            type: ['element', 'attribute'],
            prefix: '[PREFIX]',
            style: 'camelCase',
          },
        ],
        // Optional TypeScript rule overwrites
      },
    },
    {
      files: ['*.html'],
      rules: {
        // Optional HTML rule overwrites
      },
    },
  ],
};

Create a tsconfig.lint.json for your Angular project that defines all the files that should be linted.

{
  "extends": "./tsconfig.json",
  "include": ["src"]
}

Migration from `@craftworks/tslint-config-angular`

Allows easier migration by disabling a set of rules that would make migration more difficult. It is recommended to avoid this config in the long run, as it won't be actively maintained.

.eslintrc.js

module.exports = {
  root: true,
  extends: [
    '@craftworks/eslint-config-angular',
    '@craftworks/eslint-config-angular/unsafe-typing',
    '@craftworks/eslint-config-angular/tslint-config-angular-bridge',
  ],
  overrides: [
    {
      files: ['*.ts'],
      parserOptions: {
        project: ['./tsconfig.lint.json'],
      },
      rules: {
        // Optional TypeScript rule overwrites
      },
    },
    {
      files: ['*.html'],
      rules: {
        // Optional HTML rule overwrites
      },
    },
  ],
};

Peer Dependencies

eslint: ^8.56.0
typescript: ^4.7.5 || ^5.0.0
@typescript-eslint/parser: ^7.0.0
@angular-eslint/eslint-plugin: >=12
@angular-eslint/eslint-plugin-template: >=12
@angular-eslint/template-parser: >=12

The version of @angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template and @angular-eslint/template-parser must match the version of Angular you are using.

The minimal node version is 18.18.0.

See package.json for more details