This post will cover how to use ESLint in a TypeScript project and how it is beneficial.

Understanding the need for ESLint.

Linting is the process of finding problematic patterns or code that doesn’t adhere to specific style guidelines. Linting tools can be used in code editors and in a CI pipeline to enforce code in a source code repository with high-quality, readable code.

ESLint is a popular JavaScript linting tool and is capable of linting TypeScript.

The TypeScript compiler includes some options for code quality such as noUnusedLocals and noUnusedParameters, so why would we need a separate tool like ESLint? Well, while the TypeScript compiler is capable of carrying out a few code quality checks, ESLint is capable of carrying out many more checks.

What about TSLint? - isn’t this a linter specifically for TypeScript? Well, yes, TSLint is a TypeScript specific linter, but it is deprecated now.

Adding ESLint to a TypeScript project.

To add ESLint to a TypeScript project, we need to install the eslint npm package:

npm install --save-dev eslint

We need a couple of additional packages to allow ESLint to work with TypeScript:

• @typescript-eslint/parser: This parses TypeScript code to be linted.
• @typescript-eslint/eslint-plugin: This contains some standard linting rules for TypeScript code.

We can install these npm packages as follows:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Configuring ESLint

ESLint can be configured in a file in the root of a project. The file can be in JavaScript, JSON, or YAML format and can have several different names such as .eslintrc.json.

Here’s an example configuration for a .eslintrc.json file for a TypeScript project:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ]
}

We have told ESLint to use the TypeScript parser to read the code and a set of recommended rules from the packages we just installed.

Running ESLint

We can create an npm script to run ESLint in package.json:

"scripts": {
  ...
  "eslint": "eslint src/**"
},

We have told ESLint to check all the files in the src folder in our project.

We then run our eslint npm script as follows:

npm run eslint

ESLint will then report back any problems:

Below is the problematic line of code that has been identified:

const form = document.querySelector("form")!;

ESLint is warning about the use of the non-null assertion operator(!) at the end of the line. The recommended rules advise against using the non-null assertion operator.

If we are certain that the expression can’t be null or undefined then we can suppress the rule on this line with a comment:

const form = document.querySelector("form")!; // eslint-disable-line @typescript-eslint/no-non-null-assertion

A safer approach is to remove the non-null assertion operator and use the optional chaining operator (?) after we reference form:

const form = document.querySelector("form");
form?.addEventListener("submit", submitHandler);

If we rerun ESLint, it will no longer report this warning.

Great!

Wrap up

ESLint is capable of performing a comprehensive set of code quality checks on TypeScript and is the recommended linter for TypeScript code. ESLint is highly configurable and can be adjusted to meet the requirements of a particular project.