ESLint for Angular

.eslintrc.js

module.exports = {
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: ['plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'warn',
  },
  parserOptions: {
    sourceType: 'module',
  },
  overrides: [
    {
      files: '*.ts',
      parser: '@typescript-eslint/parser',
      parserOptions: {
        project: 'tsconfig.json',
        createDefaultProgram: true,
      },
      extends: [
        'airbnb-typescript/base',
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking',
        'plugin:@angular-eslint/recommended',
        'plugin:@angular-eslint/recommended--extra',
        'plugin:prettier/recommended',
      ],
      rules: {
        'no-plusplus': 'off',
        'no-underscore-dangle': 'off',
        'import/prefer-default-export': 'off',
        'import/order': 'warn',
        'prettier/prettier': 'warn',
        '@typescript-eslint/lines-between-class-members': 'warn',
        '@typescript-eslint/no-use-before-define': 'off', // <-- We use forwardRef in Angular
        '@angular-eslint/sort-ngmodule-metadata-arrays': 'warn',
        '@angular-eslint/component-selector': [
          'warn',
          {
            type: 'element',
            prefix: 'app',
            style: 'kebab-case',
          },
        ],
        '@angular-eslint/directive-selector': [
          'warn',
          {
            type: 'attribute',
            prefix: 'app',
            style: 'camelCase',
          },
        ],
      },
      overrides: [
        {
          files: '*spec.ts',
          rules: {
            'import/no-extraneous-dependencies': 'off', // <-- So we dont get warnings about dev dependencies used in spec files
            '@typescript-eslint/no-floating-promises': 'off', // <-- Heavily used in spec files
          },
        },
      ],
    },
    {
      files: ['*.html'],
      extends: ['plugin:@angular-eslint/template/recommended'],
    },
    {
      files: ['*.html'],
      excludedFiles: ['*inline-template-*.component.html'],
      extends: ['plugin:prettier/recommended'],
      rules: {
        'prettier/prettier': [
          'warn',
          {
            parser: 'angular',
          },
        ],
      },
    },
  ],
};

See Angular-ESLint

This is intended to be used with ng add @angular-eslint/schematics, but you can still use it without CLI

Packages used:

"husky": "^6.0.0",
"prettier": "^2.3.0",
"lint-staged": "^11.0.0",

"eslint": "^7.27.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-airbnb-typescript": "^12.3.1",

"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",

"@angular-eslint/builder": "^12.1.0",
"@angular-eslint/schematics": "^12.1.0",
"@angular-eslint/eslint-plugin": "^12.1.0",
"@angular-eslint/template-parser": "^12.1.0",
"@angular-eslint/eslint-plugin-template": "^12.1.0",

"stylelint": "^13.13.1",
"stylelint-prettier": "^1.2.0"
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^22.0.0",
"stylelint-config-sass-guidelines": "^8.0.0"