ESLint and Prettier for Angular in 2 minutes

Author owns image rights. Icons from app developers.

Not a member? Read this article for free.

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…