Adding a Linter to your project
Tags: webdev, tutorial, typescript, node
Published: 2023-02-25 17:44:28

## What is a linter

Let's start by defining what is a linter. A linter is a tool to help you improve your code
by analyzing your source code looking for problems.

Even though there are linters for most languages, they are more valuable for interpreted
languages since they don't have a compiler to dectect errors during development time.

## Advantages of user a linter

Here ar some of the benefits that this kind of tool can provide to help you write better code

- **Fewer errors in production**: The use of a linter help you to diagnose and fix some technical
  issues in the code, making them less likely to go into production.

- **Readable, maintainable code**: Linters can help you to have more readable and maintainable code
  by enforcing its rules.

- **Standarize code style and aesthetic**: By applying its rules, a linter will force how a code will look
  making it easier to follow the company's code styles and aesthetics, allowing the code reviews focus on
  what does the code is doing and not in its formating.

- **Educate developers on code quality**: By enforcing its rules a linter can help developers _specially the
  ones with less experience_ to learn about code quality.

## Types of Checks

Let's go through some of the types of checks that a linter can provide

**Syntaxt Errors**

This is the most basic type of check that a linter can provide and is to be able to verify that your
code don't have syntaxt errors. On interpreted languages this is very important since you don't have
a compiler to check for those. A way for you to ensure that your code is verified by a linter is to
add pre-commit hooks to prevent a commit if there is this kind of error.

**Code Standard Adherence**

This check is arguable looking just a pure aesthetics check, but in teams this is very important because
having consistent coding standards decrease the time to understand and read the code so every code review
is going to be faster, this will make the reviewer to find potential bugs faster.

## Available tools

There are many tools that provide linting some are more opinionated and doesn't allow you to define your own
rules, and in the other hand you have tools that are highly configurable to allow to define your own rules to
adhere and define your own project style.

We will be looking here to a JavaScript and TypeScript tool that is highly configurable and is _ESLint_ and it
works great with a code formatter called _Prettier_, so let's continue by adding and configuring those tools in
our project

## Adding ESLint to your project

To add ESLint to your project, you will just need to execute on your command line

```cmd
$ npm install -D eslint
```

![Installing ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shkmimjse1t7i5iwjvm5.png)

This will install ESLint as a devDependency inside your project.  To configure ESLint we need to run

```cmd
$ npx eslint --init
```

This will start the ESLint Configuration process

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrxoufdg7amca6hhn3h3.png)

Lets answer with Y so it will install the required packages, after it is done, it will ask you several questions

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1md0cakwwgw23sca4ywt.png)

Using the up and down arrows select the option you prefer, I will chose _To check syntax, find problems, and enforce code style_ press Enter to accept

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utnczfea8k34gz53qpeo.png)

Since we are using import we will be selecting _JavaScript modules (import/export)_

![ESLint confit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qc43vhc673jdb8r5033v.png)

Now it will ask you which framework are we using, since this is an Express server we are working on, I'll be selecting _None of these_

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8geczq6zmujpdzy4l56.png)

Since we are using TypeScript in our project, lets say Yes to this question

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fs11mcof06xms0ttku0.png)

Since this is just an Express server we are working on, just select _Node_, instructions on how to select are displayed on screen

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g863fu01y612y4l7007w.png)

I always recommend to _Use a popular guide style_ since it already have some defined rules, however if you don't like to apply any rule you can always override it on your configuration file

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g12pf2v3ux5trgj7b8ry.png)

I like starting with the _Standard: https://github.com/standard/eslint-config-standard-with-typescript_ so lets select it.

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3fgtulu2t6jwq1arwjw.png)

Finally, it will ask you about the file type of your configuration file is, I like working with JSON so lets select it

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcmow8ht98x1hbso8p7u.png)

After we have answered all of the configuration questions the init function asked, we will be asked to install all of the libraries our answers require to work, so lets say yes

![ESLint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m25d0rrat50p5ckp2yq0.png)

Since in this project we are using "npm" to install our libraries, select it.  After installing all of the packages we are done, so lets see what did all of this created

![File structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99fj34o7iono8tsl2g0d.png)

As we can see, it has created a _.eslintrc.json_ file which will hold all of our linter configuration and rules, and updated our _package.json_ file.  Lets start by looking at that last file

![Package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt2xwtftkijg74ow999u.png)

As we can see it had installed several dev dependencies to our project, but we still need to add a script to be able to run the linter, we do by adding the following to the scripts section:

```JSON
{
    ...,
    "scripts": {
        ...,
        "lint": "eslint .",
        "lint:fix": "eslint --fix .",
        ...
    }
    ...
}
```

This will make our file to look like the following

![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hao31lo592xt2wyk179f.png)

Lets check now our _.eslintrc.json_ file, it should be looking like this

![.eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x70xycswnip2xzs967tw.png)

We need to add where is our _tsconfig.json_ file is, to do so inside the parserOptions section we need to add:

```JSON
{
    ...,
    "parserOptions": {
        ...,
        "project": "./tsconfig.json",
        ...,
    },
    ...
}
```

making the file look as following

![.eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6grybm9nh1vjvs9mcitx.png)

Finally lets run the linter, for that in the terminal, lest run:

```cmd
$ npm run lint
```

![Running the linter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nszsrm3fxctvxdnxxn5c.png)

As we can see there are several errors in our code most of them can be fixed automatically by running:

```cmd
$ npm run lint:fix
```

![running lint:fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euzar2mmudiyixqfwbqb.png)

To add the test directory to the linter, we need to add it on our _tsconfig.json_ file inside the _includes_ array

![tsconfig.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/039z145hnll9so5avqhz.png)

Lets run the linter again

![npm run lint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/waaeou2lszfq7kcwrc3c.png)

and lets run the automatic fix again

![npm run lint:fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hey6ai9ffibaemuyysgj.png)

So now we are just getting errors in the _dist_ folder, which is generated by the TypeScript compiler, to tell the linter not to check those files. To do so we add an _ignorePatterns_ key in our _.eslintrc.json_ file

![.eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23dlebls3qjcksl5rxnd.png)

Finally lets run the linter again

![successful linter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqz7125di2xof3b2lb5m.png)

Now we have ESLint properly configured in our project and our code is compliant with the standard TypeScript rules.

## Conclusions

In today post, we've learned about linters and how to properly configure *ESLint* in our TypeScript Express project

## Next Steps

After this we just need to:

- Add the routes to work the logic of our application

These topic I will cover them in future post