Learn ESLint concepts, not rules

Seif Ghezala profile picture

Seif Ghezala

Aug 01, 2019 · 5 min read

Title obviously copied from here.

What is ESLint and why is it useful?

A solution is useless if it doesn’t solve a problem. So let’s start with the problems we have when writing JavaScript code.

Problem #1: JavaScript is not compiled while you write it

Whether we are writing JavaScript for the browser or Node, the code is compiled in the same target engine that will run it. While writing a JavaScript code, we have no idea about its validity before it is compiled and run in the engine. So if we write the following code:

var y = x + 1;

We’ll have to wait until it’s compiled to get an error about the fact that xis not defined.

Problem #2: JavaScript compilation is loose

A lot of errors are only reported only at runtime. Let’s look at the following example:

function foo() {
    var y = x + 1;
}

If you ship this code, it will run fine until foo is actually called. Although the function has an obvious error because x is never defined, it is only detected at runtime.

ESLint to the rescue

You can be a very careful and skilled developer, and still ship errors because of the 2 previous problems. One solution to this is to enforce some rules on your code and make sure they are followed at the time you are writing your code. This is exactly what linting tools such as ESLint help you accomplish. For example, the previous 2 bugs could be signaled by ESLint if you configure it to detect using undeclared variables. Now that we understand the usefulness of ESLint, let’s learn how to use it :)

How to install ESLint?

$ npm i--save - dev eslint

or

$ yarn add - D eslint

or using any other packages manager tool of your preference.

How to use ESLint from the command line

Let’s create a simple index.js file and put our foo function in it:

// index.js
function foo() {
    var y = x + 1;
}

You can then run ESLint from the command line as follow:

$./ node_modules /.bin / eslint index.js

or through npx (in this case you don’t even have to install ESLint):

$ npx eslint index.js

or if you’re using yarn:

$ yarn run eslint index.js

You don’t see anything? It’s ok, it’s expected. Jump to the next section 👇.

How to configure an ESLint rule?

ESLint doesn’t report anything without configuration. Let’s create a configuration file .eslintrc and make ESLint report the use of undeclared variables:

// .eslintrc
{
    "rules": {
        "no-undef": "error"
    }
}

In this case, we are telling ESLint to report the use of undeclared variables as an error.

Now if you run ESLint, you should see the following error reported:

3: 11  error  'x' is not defined  no - undef

We know how to configure and run ESLint in the terminal. That’s actually great! By doing just that, we increased the reliability of our code when it comes to using undeclared variables. This solves our second problem. But what about reporting errors while we are writing code?

How to use ESLint in your code editor?

There are plugins for ESLint in most editors. For example, you can get ESLint feedback in VSCode by installing this plugin. After enabling ESLint in VSCode, you should see the previous ESLint error directly in your code:

ESLint error in VSCode
ESLint error in VSCode

It’s also dynamic. ESLint is re-run every time you type. So if you declare x, the error will immediately disappear:

ESLint in VSCode after resolving the error
ESLint in VSCode after resolving the error

How to adjust the severity of rules?

Rules violations don’t have to be reported as errors. For example, we can configure an ESLint rule to only report warnings:

// .eslintrc
{
    "rules": {
        "no-undef": "warn"
    }
}

We can also turn off a rule:

// .eslintrc
{
    "rules": {
        "no-undef": "off"
    }
}

How to use more rules?

ESLint ships with a bunch of built-in rules like the one we saw before. You can find detailed documentation about every single one of them here.

How to use ESLint’s recommended configuration?

One of the features that make ESLint a truly pluggable tool is that you can easily consume pre-existing configurations in your own .eslintrc file.

eslint: recommended is a configuration that ships with ESLint and that you can easily consume using the extend property:

// .eslintrc
{
    "extends": "eslint:recommended"
}

This will automatically configure several rules. If we look at our index.js file, we’ll see that ESLint automatically reported 3 errors:

ESLint errors after extending eslint:recommended
ESLint errors after extending eslint:recommended

How to override ESLint’s recommended configuration?

Since we are extending a configuration, we can customize it. In fact, we can customize the configuration of any rule by overriding it in the rules block. For example, we can turn off the no-unused-vars rule as follow:

// .eslintrc
{
    "extends": "eslint:recommended",
        "rules": {
        "no-unused-vars": "off"
    }
}

If we go back to the index.js file, we’ll see that ESLint doesn’t report errors from that rule anymore:

ESLint errors after disabling no-unused-vars
ESLint errors after disabling no-unused-vars

How to use rules created by others?

If you’re already impressed by ESLint extensibility, now you’re gonna be blown away 🤯. You can actually import & use rules created by anyone. A set of third-party rules is called a plugin. By convention, ESLint plugins names have the prefix eslint - plugin -. For example, eslint-plugin-node is a plugin that has ESLint rules specific to NodeJS. After installing the npm package, we can load its rules by adding its name (we can omit the eslint-plugin prefix) in the plugins configuration property:

// .eslintrc
{
    "plugins": ["node"]
}

At this point, the rules are ready and configurable. We can hand-pick some of them and configure them:

// .eslintrc
{
    "plugins": ["node"],
        "rules": {
        "node/prefer-promises/dns": "error",
            "node/prefer-promises/fs": "warn"
    }
}

Most plugins ship as well with shareable configurations. Therefore, you also have the option to extend these configurations and overriding them:

// .eslintrc
{
    "plugins": ["node"],
        "extends": ["eslint:recommended", "plugin:node/recommended"],
            "rules": {
        "node/prefer-promises/dns": "error",
            "node/prefer-promises/fs": "warn"
    }
}

Notice how we extended more than one shareable configuration. We only had to pass an array of the confugurations we wanted to extend (eslint:recommended and plugin:node/recommended ) and ESLint took care of merging them :)

Imprint