Adding ESlint to Your Project

In this article I will help you to add ESlint to an existing or a new project with a couple of easy steps using the ESlint CLI tool.

Here we have a simple model in mongoose, but it doesn’t look so good and we want to add ESlint to follow some best practices and even catch some errors prior running our code.

First let’s install ESlint and save it as dev dependency:

npm i eslint -D

Let’s add a lint task to our package.json file:

And run the init command by passing arguments to our npm task:

npm run lint -- --init

The ESlint cli wizard will show up and ask us how do we like to configure it.
I want to follow a popular style guide:

Airbnb sounds like a pretty solid style guide, Let’s choose that:

I don’t use React in this project, so let’s answer no:

I chose the JSON format, but it can be either JavaScript or YAML format.

ESlint will kick in and install for us all necessary dependencies and will create an .eslintrc.json configuration file extending it with the airbnb-base rules.

You can enable ESlint inside your IDE, in Webstorm you go to
Settings ➝ Languages & Frameworks ➝ Code Quality Tools ➝ Eslint
and check the Enable.

We can immediately see visually that we have linting errors. We can also run the command line to check our files, lint them and even trying to fix them.

Let’s change our npm lint task and add the folder with the source code and the fix argument.

And run the task:

npm run lint

We can see that ESlint was able to fix some errors in our code, but we still have two more problems we need to fix it manually.

After I fixed the file, I ran the lint task once again, and now we are all good.

I hope this tutorial helped you to add ESlink to your project too and to write better code. 😃