@craftworks/eslint-config-angular

An ESLint config optimized for Angular.

Contains the configs of

• **/*.ts
  • @craftworks/eslint-config-typescript
    • eslint:recommended
    • @typescript-eslint/recommended-type-checked
    • @typescript-eslint/strict-type-checked
    • @typescript-eslint/stylistic-type-checked
    • unicorn/recommended
    • jsdoc/recommended-typescript
  • @angular-eslint/recommended
  • jest/recommended
  • jest/style
  • rxjs/recommended
  • compat/recommended
  • prettier
• **/*.html
  • @angular-eslint/template/recommended
  • @angular-eslint/template/accessibility
  • prettier

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

eslint.config.mjs

import eslintConfigAngular from '@craftworks/eslint-config-angular';

export default [
  ...eslintConfigAngular,
  {
    files: ['**/*.ts'],
    languageOptions: {
      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"]
}

Note that only flat config is supported.

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.

eslint.config.mjs

import eslintConfigAngular from '@craftworks/eslint-config-angular';
import eslintConfigAngularUnsafeTyping from '@craftworks/eslint-config-angular/unsafe-typing';
import eslintConfigAngularTslintConfigAngularBridge from '@craftworks/eslint-config-angular/tslint-config-angular-bridge';

export default [
  ...eslintConfigAngular,
  ...eslintConfigAngularUnsafeTyping,
  ...eslintConfigAngularTslintConfigAngularBridge,
  {
    files: ['**/*.ts'],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.lint.json'],
      },
    },
    rules: {
      // Optional TypeScript rule overwrites
    },
  },
  {
    files: ['**/*.html'],
    rules: {
      // Optional HTML rule overwrites
    },
  },
];

Peer Dependencies

• eslint: ^9.0.0
• angular-eslint: >=18.0.0
• @eslint/js: ^9.0.0
• typescript: ^4.8.4 || ^5.0.0
• typescript-eslint: ^8.0.0

The version of angular-eslint must match the version of Angular you are using.

The minimal node version is 18.18.0.

See package.json for more details

Change Log

See CHANGELOG.md

License

MIT