Set Up ESLint with Angular and the Airbnb Style Guide (effortlessly)
Tags: angular, eslint, frontend
Published: 2023-04-13 19:22:07

In this post I will walk you through my usual ESLint setup for Angular projects.
If you want to do this **effortlessly** just jump to Summary.

As a starting point I will assume that your project is [created using Angular CLI](https://angular.io/cli).

```
ng new my-project
```

Our starting point is going to be a very cool and easy to use
[@angular-eslint/eslint-plugin](https://www.npmjs.com/package/@angular-eslint/eslint-plugin). 

### 🎯 1. Installing ESLint

Change directory into your new workspace and then use the Angular CLI to add @angular-eslint/schematics.

```
ng add @angular-eslint/schematics
```

This will:


- add **ng lint** command to your package.json and angular.json
- create starting **.eslintrc.json** configuration file
- add schematic collection to angular.json file so files generated by Angular CLI will be created using ESLint rules

- install and add **eslint** and **angular-eslint** packages to your package.json dev dependencies

```json
 // package.json devDependencies

 "@angular-eslint/builder": "15.2.1",
 "@angular-eslint/eslint-plugin": "15.2.1",
 "@angular-eslint/eslint-plugin-template": "15.2.1",
 "@angular-eslint/schematics": "15.2.1",
 "@angular-eslint/template-parser": "15.2.1",
 "@typescript-eslint/eslint-plugin": "5.48.2",
 "@typescript-eslint/parser": "5.48.2",
 "eslint": "^8.33.0",
```

You can find more information about @anguar-eslint plugin [here](https://github.com/angular-eslint/angular-eslint#quick-start).

### 🎯 2. Setting up linting rules with Airbnb Style Guide

Setting up linting rules for your codebase is a matter of personal preference and team agreement. With hundreds of potential rules to choose from, manually configuring them all from scratch can be a daunting task that requires significant time and resources.

One popular and widely used style guide for writing clean and consistent JavaScript code is the Airbnb style guide. This guide provides a comprehensive set of guidelines that can help ensure your code is readable, maintainable, and bug-free. Personally, I prefer to use the Airbnb style guide for my projects.

To ensure that ESLint works well with Angular, I use two following packages.

- [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base)
- [eslint-config-airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript)

I also prefer to have my used imports arranged in a consistent order. To achieve this, I use ESLint plugins with self-explanatory names.

- [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
- [eslint-plugin-unused-imports](https://www.npmjs.com/package/eslint-plugin-unused-imports)

```
npm install eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-plugin-simple-import-sort eslint-plugin-unused-imports --save-dev
```

My final **.eslintrc.json** version would look like this.

```json
{
    "root": true,
    "ignorePatterns": [
        "projects/**/*"
    ],
    "plugins": ["unused-imports", "simple-import-sort"],
    "parserOptions": {
        "project": "./tsconfig.json"
    },
    "overrides": [
        {
            "files": [
                "*.ts"
            ],
            "extends": [
                "airbnb-base",
                "airbnb-typescript/base",
                "plugin:@typescript-eslint/recommended",
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates"
            ],
            "rules": {
                // ESLint rules
                "import/prefer-default-export": "off",
                "import/first": "error",
                "import/newline-after-import": "error",
                "import/no-duplicates": "error",
                "max-len": [
                    "error",
                    120
                ],
                "simple-import-sort/imports": "error",
                "simple-import-sort/exports": "error",
                // eslint-plugin-unused-imports rules
                "unused-imports/no-unused-imports": "error",
                "unused-imports/no-unused-vars": [
                    "warn",
                    { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
                ],
                // TypeScript Eslint rules
                "@typescript-eslint/indent": [
                    "error",
                    4
                ],
                "@typescript-eslint/comma-dangle": "off",
                "@typescript-eslint/lines-between-class-members": "off",
                "@typescript-eslint/quotes": ["error","double"],
                "@typescript-eslint/no-shadow": "error",
                "@typescript-eslint/no-explicit-any": 0,
                // Angular ESLint rules
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "app",
                        "style": "camelCase"
                    }
                ],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": "app",
                        "style": "kebab-case"
                    }
                ]
            }
        },
        {
            "files": [
                "*.html"
            ],
            "extends": [
                "plugin:@angular-eslint/template/recommended"
            ]
        }
    ]
}

```

----------

## 🎯 Summary

1) Create Angular project using Angular CLI

```
ng new my-project
```

2). Change directory to your project and run

```
ng add @angular-eslint/schematics
```

3) Install Airbnb ESlint and plugins for import handling

```
npm install eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-plugin-simple-import-sort 
```

4) Copy my .eslintrc.json configuration specified above

5) Run

```
ng lint
```


While you are working you may discover rules that you don't agree with, or that aren't necessary or appropriate for your particular project. When this happens, you can easily enable or disable specific rules by adding them to the "rules" property inside your .eslintrc.json file.

The right rules are your own rules.
Have fun configuring your linter!