Angular ESLint with Prettier, AirBnB Styleguide, Husky and lint-staged configuration

angular-lint.md

Install Angular ESLint

ng add @angular-eslint/schematics

To lint Jasmine spec files, install appropriate npm-package

npm i eslint-plugin-jasmine -D

And add a new block of rules in overrides for files with *.spec.ts extension:

"overrides": [
  ...,
  {
    "files": [
      "src/**/*.spec.ts", "src/**/*.d.ts"
    ],
    "parserOptions": {
      "project": "./src/tsconfig.spec.json"
    },
    "extends": [
      "plugin:jasmine/recommended"
    ],
    "plugins": [
      "jasmine"
    ],
    "env": { "jasmine": true },
    "rules": {}
  },
],

Add AirBnB Styleguides rules

npm i eslint-plugin-import eslint-config-airbnb-typescript -D

In order not to change top level settings, add AirBnB Styleguide rules in a block of the ['*.ts'] rules in overrides property:

"extends": [
  "plugin:@angular-eslint/recommended",
  "plugin:@angular-eslint/template/process-inline-templates",
  // AirBnB Styleguide rules
  "airbnb-typescript/base",
  // to avoid import errors
  "plugin:import/recommend",
  "plugin:import/typescript",
  ...
],

Install Prettier

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

In ESLint config overrides in the bottom of extends property in the block of rules for files with .ts extension add Prettier settings:

"extends": [
  "plugin:@angular-eslint/recommended",
  "plugin:@angular-eslint/template/process-inline-templates",
  "airbnb-typescript/base",
  // Settings for Prettier
  "plugin:prettier/recommended"
],

Prettier config

Create .prettierrc in app root folder:

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "semi": true,
  "bracketSpacing": true,
  "trailingComma": "es5",
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

Configuring Git Hooks

npm i husky lint-staged -D

Add new settings for this plugins in package.json:

"scripts": {
  ...,
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged --relative",
    "pre-push": "lint-staged --relative"
  }
},
"lint-staged": {
  "src/**/*.{js,ts,html,css,scss}": [
    "prettier --write && eslint"
  ]
},

Add Fix Lint and Prettier errors command in package.json

"lint": "ng lint",
"lint:fix": "prettier --write src && ng lint --fix"

Webstorm settings