Adding the ESLint to an Angular application

2 min readOct 12, 2022

Introduction

In this article, a WEB application will be created using the latest version of Angular and added the ESLint which analyzes the code statically to find problems with the JavaScript code.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application.

git: Git is a distributed version control system and it will be used to sync the repository.
Node.js and npm: Node.js is a JavaScript code runtime software based on Google’s V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.

Getting started

Create the Angular application

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.

1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

2. Now we will install the libraries and add the ESLint settings.

3. Next, we will run the command below to validate the ESLint installation and configuration.

4. Ready! The message All files pass linting. shows that no problem was found.

The application repository is available at https://github.com/rodrigokamada/angular-eslint.

Conclusion

In summary, the following topics were covered in this article:

We created an Angular application.
We added the ESLint to analize and find problems with the code.

You can use this article to analize and find problems with your application code before deploying to your environment.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.