ESLint: What, Why, When, How

Here’s everything you need to know about ESLint, and how you can use it to make your codebase better.

Before getting dive into ESLint, let’s talk about what is lint?
Well, lint is the common name for visible accumulations of textile fibres and other materials, usually found on and around clothing. Lints are not good. They spoil your clothes.

Lint. Credits: Google Images.

Now that you know what is lint (in general), you might wonder what it actually means in the Computer Science world. So here’s the definition from Wikipedia:

lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs. The term originates from a Unix utility that examined C language source code.

Now let’s talk about ESLint in 3W-1H style.

What is ESLint?

ESLint is an open-source Javascript linting utility originally created by Nicholas C. Zakas in June 2013. It is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. ESLint is written using Node.js to provide a fast runtime environment and easy installation via npm.
With ESLint you can impose the coding standard using a certain set of standalone rules. Yes, you can turn those rules on and off. These rules are completely pluggable.

Why use ESLint?

JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. ESLint lets you put guidelines over coding standard and helps you to minimize those errors. The main reason for imposing those guide is because every developer has her style of writing (like naming conventions/tabs/single or double quotes for a string). And, with different styling techniques, your codebase may look weird, more error-prone and vulnerable. Especially when you’re dealing with Javascript this could cause pitfalls you’d never want to deal with.

When to use it?

Honestly, I prefer to use it no matter the project size or the team. But you should consider having it for any medium to large-scaled non-trivial Javascript/Typescript project or/and you’ve got quite a team of developers to deal with. In either case, you have to impose common, standard coding practice/guidelines.

Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. One of the main the reason for ESLint was created was to allow developers to create their own linting rules. You can use ESLint in any application that runs on Javascript/Typescript:

1. React/React Native
2. Angular
3. Node.

Who’s using ESLint?

Please click here to check who’s using ESLint.

How to use it?

Enough talk, eh? Here’s how you can install it.

Install it

Prerequisites: Node.js (^10.12.0, or >=12.0.0)
You can install ESLint using npm or yarn:

$ npm install eslint --save-dev
# or
$ yarn add eslint --dev

Note: It is also possible to install ESLint globally rather than locally (using npm install eslint —-global). However, this is NOT recommended, and any plugins or shareable configs that you use must be installed locally in either case.

Initialize it

After installing it, initialize it with the following command:

$ npx eslint --init

# or

$ yarn run eslint --init

Note: — init assumes you have a package.json file already. If you don’t, make sure to run npm init or yarn init beforehand.

Configure it

The moment you’re done with the installation and initialization you’ll have a .eslintrc.{js,yml,json} file in your directory. In it, you’ll see some rules configured like this:

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

Use it

If you’re here that means you’ve successfully configured the ESLint. Here’s how you can use it:

$ npx elinst <your file>.js
# or 
$ npx eslint <folder containing js files>

If you’ve done everything write, you should see something like this:

Sample Image for ESLint

You can also add lint in yourpackage.json file (if not already added)

"scripts": {
  ...
  "lint": "eslint .",
  ...
}

Congrats!

You’ve successfully made your codebase look a lot cleaner and better than ever in just a few steps.