Angular eslint

Introduction

Just a page to setup Eslint

Install Dependencies

ng add @angular-eslint/schematics

eslintrc.js

In the root of the project create a .eslintrc.js

module.exports = {
  root: true,
  overrides: [
    {
      files: ["*.ts"],
      parserOptions: {
        project: [
          "tsconfig.*?.json",
          "e2e/tsconfig.json"
        ],
        createDefaultProgram: true
      },
      extends: ["plugin:@angular-eslint/recommended"],
      rules: {
        ...
      }
    },
    {
      files: ["*.component.html"],
      extends: ["plugin:@angular-eslint/template/recommended"],
      rules: {
        "max-len": ["error", { "code": 140 }]
      }
    },
    {
      files: ["*.component.ts"],
      extends: ["plugin:@angular-eslint/template/process-inline-templates"]
    }
  ]
}

Update ng lint command

Edit the angular.json

"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "lintFilePatterns": [
      "src/**/*.ts",
      "src/**/*.component.html"
    ]
  }
},

Install additional ESLint Plugins

If you want to install another plugin for ESLint, for example, to lint Jasmine spec files, install appropriate npm-package:

npm install eslint-plugin-jasmine --save-dev

We now need to add a section. Each starts with { files: } and is under the overrides section.

overrides: [
  ...,
  {
    files: ['src/**/*.spec.ts', 'src/**/*.d.ts'],
    parserOptions: {
      project: './src/tsconfig.spec.json',
    },
    // Jasmine rules
    extends: ['plugin:jasmine/recommended'],
    // Plugin to run Jasmine rules
    plugins: ['jasmine'],
    env: { jasmine: true },
    // Turn off 'no-unused-vars' rule
    rules: {
      '@typescript-eslint/no-unused-vars': 'off'
    }
  }
],

Install airbnb

Install the style guide

npm install eslint-plugin-import eslint-config-airbnb-typescript --save-dev

As with the jasmine plugin add the *.ts entry under overrides <syntaxhighlight lang="js"> module.exports = {

 ...,
 overrides: [
   {
     files: ["*.ts"],
     parserOptions: {
       project: [
         "tsconfig.*?.json",
         "e2e/tsconfig.json"
       ],
       createDefaultProgram: true
     },
     extends: [
       "plugin:@angular-eslint/recommended",
       // AirBnB Styleguide rules
       'airbnb-typescript/base'
     ],
     rules: {
       // Custom rules
       'import/no-unresolved': 'off',
       'import/prefer-default-export': 'off',
       'class-methods-use-this': 'off',
       'lines-between-class-members': 'off',
       '@typescript-eslint/unbound-method': [
         'error',
         {
           ignoreStatic: true,
         }
       ]
     }
   },
   ...
 ]

} <syntaxhighlight lang="bash">