Telerik blogs
AngularT2_Light_1200x303

Learn how to use ESLint in your Angular projects and how ESLint helps you write better code.

What Is Linting?

Linting is basically an automated static code analysis of a code block for errors usually done by a tool known as a linter. Angular uses TypeScript, which in the past came with its own linter by the Palantir team called TSLint.

What Happened to TSLint?

If you use Angular, well, you probably know about TSLint and how it has always been what Angular developers use for linting. However, some changes were made a while back.

According to the official statement by the TSLint team in February 2019:

It is clear that linting is a core part of the TypeScript/JavaScript developer experience, and so Palantir’s TSLint team met with the TypeScript core team in Redmond to discuss what the TypeScript/JavaScript convergence should mean for linting. The TypeScript community intends to meet JavaScript developers where they are, and ESLint is the tool of choice for JavaScript linting. In order to avoid bifurcating the linting tool space for TypeScript, we, therefore, plan to deprecate TSLint and focus our efforts instead on improving ESLint’s TypeScript support.


Palantir blog

TSLint got deprecated to focus on improving ESLint’s (another linter) TypeScript support.

Angular Without Linters

TSLint was still supported by Angular, even though it had been deprecated, till the release of Angular CLI v12. From that version, once you run the ng new command, the lint configuration is no longer generated by default anymore. Let’s see how it works when we create a new Angular project.

Run this command in the terminal in the file location of your choice:

ng new testy

You’ll see that inside the package.json file, there are no linter specifications anymore. The same result when you open the angular.json file too. This is only from Angular 12 and above—older versions still have TSLint.

Searching for lint in pacakge.json yields no results

BYOL: Bring Your Own Linter

With older versions, you can just run the ng lint command like this

ng lint

Now when you do so, this is what you find.

bring-in-linter recommends eslint

You see that Angular lets you bring in your own linter. However, they recommend ESLint, and if you want, it can be easily added to your project with one click.

What Is ESLint?

ESLint - Find and fix problems in your JavaScript code

ESLint is one of the most-used linters that exist. It runs analysis on your code fast to find bugs, errors and issues, and it is built into a lot of IDEs. You get to automatically fix these errors in a syntax-aware manner, and you get a find-and-replace type behavior in some IDEs too. It is also fully customizable and that is the best part.

Getting ESLint Set Up in Your Angular Project

There are two ways you can add ESLint to your Angular project. The first way is by running the lint command:

ng lint

This will tell you there is no linter available but ask you if you want ESLint added. If you say yes, everything else is just a click-through.

Add-ESLint Yes - loads package info. This package will be installed and executed? Proceed? Yes. Successful install.

Now, this creates a .eslintrc.json file in your app home directory, and updates both the package.json and the angular.json files.

The second way is to do these yourself. The first thing to do is run this command in the terminal of your app:

ng add @angular-eslint/schematics

Then run this second command:

ng g @angular-eslint/schematics

Both commands handle installing new dependencies and those three changes that happened in the first option will happen here too. From creating a .eslintrc.json file in your app home directory, to updating both the package.json and the angular.json files.

The eslint file should look like this:

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "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"
      ],
      "rules": {}
    }
  ]
}

Now that you are all set, let’s take a look at your IDE.

Using ESLint in VS Code

You can install the ESLint extension in your IDE of choice. I am using VS Code.

ESLint-extension for VS Code

Provided by the Microsoft team and already downloaded over 20 million times, ESLint is a must-have extension. As you code, it begins to pop up issues and errors as problems in your terminal. You can set your own rules and maintain a sense of consistency across all your projects and even with other team members. You can use popular rules too—the Angular ESLint uses the rules you can read more about here.

Wrapping Up

We have taken a look at Linting in our Angular projects, how we have gone from TSLint to ESLint and why linting is important for consistency, learning more JS, and efficiency of time and resources. We have also seen how to set up ESLint so we can get started right away. Happy hacking!


5E9A474B-EBDB-439E-8A4A-3B041B0BEDA6
About the Author

Nwose Lotanna Victor

Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.

Related Posts

Comments

Comments are disabled in preview mode.