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
And run the
init command by passing arguments to our
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
ESlint will kick in and install for us all necessary dependencies and will create an
.eslintrc.json configuration file extending it with the
You can enable ESlint inside your IDE, in Webstorm you go to
Settings ➝ Languages & Frameworks ➝ Code Quality Tools ➝ Eslint
and check the
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
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. 😃