Eslint Basic Configuration

How to configure ESLint for Javascript Development and setup in Visual Studio Code, WebStorm, Atom and Sublime.

If you don’t use it already, ESLint is arguably one of the most used linting plugins or tools for Javascript projects to help increase quality of code by enforcing certain rules in your code, it’s open source and is supported on almost every IDE.

Install ESLint

There are two ways of installing ESLint:

$ npm install eslint --save-dev //LOCALY PER PROJECT BASIS
$ npm install -g eslint //GLOBALLY

The only difference is that when you install it globally, you also need to install all the plugins you need globally, for it to work properly.

After installing ESLint you should initialize it with an ESLint configuration file that will store the rules to be enforced in your code:

$ ./node_modules/.bin/eslint --init //IF YOUR INSTALL IT LOCALLY
$ ./node_modules/.bin/eslint yourfile.js //GLOBAL INSTALLATION

The practical way

Let’s do some demo example of configuring ESLint for a simple project.

First let’s create a new folder to store our files:

$ mkdir eslint-demo

Now let’s install it locally in our new project:

$ npm install eslint --save-dev

We are passing the--save-dev option so ESLint is only available on the development environment and not on the production one. After this we are going to initialize a new project with npm:

$ npm init

Follow along the wizard and answer the questions, I choose to leave every response with the default. You can choose otherwise:

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (eslint-demo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/davidmeza/workspace/tutorials/eslint-demo/package.json:
{
"name": "eslint-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
$

Now we need to create a index.js file:

$ touch index.js

Open the file in your preferred Text Editor, I will do it with Visual Studio Code first to write some code:

ESLint initial config

Before we configure ESLint we need some code to test against it’s functionality, so include the following in your index file:

const showMessage = () => {
const message = 'I love ESLint';
for (let i = 0; i < 5; i++) {
console.log(message);
}
}
showMessage();

and run it on the terminal and you will see the following output

$ node index.js
I love ESLint
I love ESLint
I love ESLint
I love ESLint
I love ESLint
$

Now let’s configure ESLint:

$ ./node_modules/.bin/eslint --init

You will have to answer some questions about your project:

The first question has three possible answers. I will go with the first one, but you could choose any of the other two options that fits you best. The next questions are as follows:

The choices with your answers may vary and also are related to the project. If you are not going to use JSX or React you could answer no on those questions. If you only run your code on the Browser you could let Node out of the selection.

With this we have the basic configuration for ESLint done.

Now if you go back to your code you can see that ESLint is warning us about some problems with our code:

Right know ESLint is telling us that we are using 2 spaces instead of 4 for indentation. You could correct your code if you like it with 4 spaces but I personally prefer 2 so I will change that on our .eslintrc.json file for 2 spaces.

on the rule where it says

"indent": [
"error",
4
],

change the 4 for a 2 and we are good to go. We will also add a simple rule to our ESLint configuration file as sample of what you can do with it:

"no-console": [
0
]

This way you could use console.log in your code without ESLInt complaining about it.

Your new set of rules should look like this:

You could add or remove any set of valid rules to this file and ESLint will show warning messages to help you enforce your style of coding in your project.

Plugins for different IDES and Text Editor

Visual Studio Code

I normally use ESLint by Dirk Baeumer:

WebStorm

If it’s not installed by default in your IDE I recommend this:

Sublime

Here things get a little bit trickier, because we need to make some configurations. There’s a great plugin for Sublime Text called Sublime-Linter. Once it is installed, there are a bunch of other plugins for it as well, including one for ESLint! Install it with the Command+Shift+P shorcut...

You then have to do a bit of configuration to get it actually running against your code. Go to Sublime Text -> Prefences -> Package Settings -> SublimeLinter -> Settings-User...

In here, you have to tell Sublime-Linter where your node is installed using the paths option. You can do this by running which node on the command line. For example if you use nvm your config would look like this.

"paths": {
"linux": [],
"osx": [
"/Users/jonathanc/.nvm/versions/io.js/v2.0.0/bin"
],
"windows": []
},

Atom

I normally use Linter plugin with linter-eslint for ESLint support.

Conclussion

And that’s all folks. I hope you enjoy this post and you use ESLint on your next Javascript big project.

If you have any question let me know or leave a comment.
Author: Eng. Alberto Aragón Alvarez

If you like it, clap. For more histories like this one follow our publication on Medium or subscribe to our mailing list.

We’re available to work on your react js or react native projects. Please visit our web site and let’s do something great together:

www.alturasoluciones.com

Like what you read? Give Alberto Jose Aragon Alvarez a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.