Getting started

The first thing we need to do is globally install ESLint on your machine with NPM. If you haven’t got Node or NPM installed, go ahead and do that first.

Open up your terminal app and run the following:

npm install -g eslint

That command basically says “Grab ESLint from NPM and make the eslint command globally accessible on my machine”.

Now that we’ve got it installed, we need to set our rules and we’ve got a couple of options available to us to do that.

The first option is navigate to your project in terminal by running:

cd /the/path/to/your/project

Once you are in there, run:

eslint --init

This will fire up a setup wizard which will either ask you questions about your project, scan your project or let you pick a popular template. This is great, but I think we’ll learn more with the second option.

This option is to add an .eslintrc file to your project root and fill it in.

An .eslintrc or .eslintrc.js file is a definition file for your linting rules. This works great because it keeps the eslint terminal commands clean and also creates a fully transparent setup for you and your team, which is really important when you’re enforcing a coding style and rules.

We’re already in our project directory from the command above, so let’s create an .eslintrc file:

touch .eslintrc

If you ran through the init wizard, you’ll want to clean up the generated file by running this command:

rm .eslintrc.js

Once the .eslintrc file is created, open it up and we’ll add some basic rules to it. Let’s start by adding one of my favourites. Add the following to your file:

{

"rules": {

"no-unused-vars": "warn"

}

}

So, what we’ve added there is a basic rule that says: “If there are any unused variables, present a warning”. This is a great rule to get you started and well worth adding to your codebase. You can save a tonne in performance and file size by removing references to unused variables in your code.

Next, let’s add another rule before we move on to our editor integration. Add the following to our .eslintrc file, inside the “rules” section:

"quotes": [2, "single", { "allowTemplateLiterals": true }]

This rule enforces a single quote policy on your JavaScript, unless you’re within a template literal. Pretty neat huh?

For reference, this is what your .eslintrc file should look like now:

{

"rules": {

"no-unused-vars": "warn",

"quotes": [2, "single", { "allowTemplateLiterals": true }]

}

}

Integrating our editor

This step really does come down to your editor of choice, so here’s a list of links for some of the most popular editors. Go through the relevant one for you and then come back to carry on!