ESLint: What, Why, When, How

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.

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>

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.

Comments

[Vishal Raj]

@shivambmgupta This is nice for those who want to begin adding eslint to their project. Meanwhile, here is the link to the eslint rules which can be configured.

[Shivam Gupta]

Thanks. I should have added the rules in the blog. Kudos!

[Himanshu Tiwari]

Need one for typescript aswell , by the way nice blog