ESLint and Prettier for Angular in 2 minutes

Author owns image rights. Icons from app developers.

In web application development, using Angular as a reference framework, maintaining a clean, consistent and well-formatted code is crucial for the quality and maintainability of the project. Two tools to achieve this goal are ESLint and Prettier.
We will explain how to implement them in our Angular projects.

What is ESLint and what is Prettier?

ESLint is a static code analysis tool focused on finding and correcting problems in JavaScript code and other JavaScript-based languages, such as TypeScript; it is used to maintain cleaner, more consistent and error-free code.
Prettier is a code formatting tool used to ensure that source code follows a consistent formatting style. It supports multiple programming languages and integrates easily with various development environments and text editors.

How do we install it?

First, we will have to go inside our Angular project through a terminal. And we will install ESLint introducing the following command:

ng add @angular-eslint/schematics

We will see that two files have been modified and one has been added. The two modified files are package.json and angular.json; and the added .eslintrc.json. But the two most important are package.json and .eslintrc.json.
In the package.json the ESLint dependencies have been added and a new command has been created, which is the lint. With this command we will lint the whole project by typing the command ng lint in the terminal. And in the .eslintrc.json is where we will specify all the rules that will govern our project.

Second, we will install Prettier and we will do it by entering the following command:

npm install prettier --save-dev

With this command we have added the Prettier dependency to our package.json. In order to set up our Prettier rules we will have to create the following file in the root of the project: .prettierrc.json. See the following link for the available Prettier rules.

Finally, to make Prettier work with ESLint, enter the following command in the terminal:

npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev

Once installed, inside the .eslintrc.json file, we will include "plugin:prettier/recommended" in the next section:

"overrides": [
        {
            "files": ["*.ts"],
            "extends": [
                "eslint:recommended",
                "plugin:@typescript-eslint/recommended",
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates",
                "plugin:prettier/recommended"
            ],
...

If we run ng lint we are likely to get multiple lint errors. If we want simple errors to be fixed quickly, we will type ng lint --fix; some of them may need to be manually modified by us.

Conclusions

Throughout the article we have installed ESLint and Prettier and made them work together using the ng lint command, as it is important to maintain standards within our projects in order to have clean, consistent and well-formatted code for the quality and maintainability of the project.