Set Up ESLint with Angular and the Airbnb Style Guide (effortlessly)

#angular #eslint #frontend

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.

ng new my-project

Our starting point is going to be a very cool and easy to use
@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

 // 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.

🎯 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.

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

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.

{
    "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!