Yuvaraj's Blog


Yuvaraj's Blog

How to Integrate eslint to Angular

How to Integrate eslint to Angular

Yuvaraj's photo
ยทJul 20, 2021ยท

2 min read

In this article, we will cover how to integrate eslint to Angular v12. Without any further delay, let's go!


  • Create a new Angular application with ng CLI.
ng new angular-eslint
  • Run the below command to install eslint packages
ng add @angular-eslint/schematics

The above command will prompt as,

The package @angular-eslint/schematics@12.3.1 will be installed and executed.
Would you like to proceed?

Press Yes to let it continue.

This will install the following packages,

"@angular-eslint/builder": "12.3.1",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/schematics": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"eslint": "^7.26.0",

Then, it adds lint to the scripts section in package.json

"scripts": {
    "lint": "ng lint"  <--- Newly added

And finally, it adds lint to the angular.json

Screenshot 2021-07-20 at 8.42.13 PM.png


To verify if eslint is integrated, add ngOnInt to AppComponent.

import { Component, OnInit } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent implements OnInit {
  title = 'angular-eslint';

  ngOnInit() {


Then, run ng lint in the terminal.

It will show the below errors in the terminal.

Linting "angular-eslint"...

  11:3  error  Lifecycle methods should not be empty  @angular-eslint/no-empty-lifecycle-method

โœ– 1 problem (1 error, 0 warnings)

Lint errors found in the listed files.

It is working as expected. As per the eslint rule, lifecycle methods should not be empty.



If you are using VSCode, then install the Eslint extension.

Screenshot 2021-07-20 at 8.50.32 PM.png

Screenshot 2021-07-20 at 8.51.25 PM.png

It will show the error when writing the code. It helps us to resolve while writing the code itself!

I hope you enjoyed this article or found it helpful.

You can connect with me on Twitter & Github ๐Ÿ™‚

Support ๐Ÿ™Œ

You can support me by buying me a coffee with the below link ๐Ÿ‘‡

Did you find this article valuable?

Support Yuvaraj by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this