Adding Linting to React and TypeScript

Linting is a series of checks that are used to identify code that is potentially problematic. A linter is a tool that performs linting, and it can be run in our code editor as well as in the continuous integration (CI) process. So, linting helps us write consistent and high- quality code as it is being written.

ESLint is the most popular linter in the React community and has already been installed in our project for us by CRA. Due to this, we will be using ESLint as our linting tool for our app.

Note: TSLint was a popular alternative to ESLint for linting TypeScript code but is now deprecated.

In the following subsections, we will learn how to configure ESLints rules, as well as how to configure Visual Studio Code to highlight violations.

Configuring Visual Studio Code to lint TypeScript code

CRA has already installed ESLint and configured it for us.

Note: Note that ESLint doesn’t appear in our package.json file. Instead, it is part of the CRA package. This can be confirmed by opening the package.json file in node_modules\react-scripts.

We need to tell Visual Studio Code to lint TypeScript code. Let’s carry out the following steps to do this:

1. First, let’s reopen Visual Studio Code in the “frontend” folder. This is required for an extension that we are going to install in a later step.

2. Go to the “Extensions” area in Visual Studio Code (“Ctrl + Shift + X”) and type “eslint” into the search box in the top-left corner. The extension we are looking for is called “ESLint” and is published by Dirk Baeumer: