Adding ESlint to Your Project

Alon Valadji
Dec 13, 2017 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

You can enable ESlint inside your IDE, in Webstorm you go to
Settings Languages & FrameworksCode Quality ToolsEslint
and check the Enable.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

DailyJS

JavaScript news and opinion.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store