Adding a Linter to your project

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

$ npm install -D eslint

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

$ npx eslint --init

This will start the ESLint Configuration process

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

This will make our file to look like the following

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

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

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

making the file look as following

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

$ npm run lint

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

$ npm run lint:fix

To add the test directory to the linter, we need to add it on our tsconfig.json file inside the includes array

Lets run the linter again

and lets run the automatic fix again

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

Finally lets run the linter again

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