Getting Started with ESLint

ESLint is a JavaScript/TypeScript based tool to find predefined patterns and take certain actions on them. ESLint is usually used by developers to maintain consistent code quality and to avoid bugs. It requires NodeJS for it’s installation.

Installation and Usage

To install and use ESLint for a JavaScript/TypeScript based project, you will need NodeJs(^12.22.0, ^14.17.0, or >=16.0.0).

Use npm to install ESLint on a preexisting project with a package.json file.

npm init @eslint/config

After the installation is successful you can run ESLint for any file or directory by using the command:

npx eslint filename.js

Configuration

After installation you will see a file named .eslintrc.{js,yml,json} in you project directory where you will see some rules already configured for you. This might look like:

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

The “rules” part of ESLint configuration object is where all pattern matching rules are configured. Rules are written in key, value pairs. Where key is the rule name of some predefined ESLint rule and the value array contains the actions corresponding to the rule match. Here keys “semi” and “quotes” are predefined pattern rules. You can find all the rules here.

Get Ayush Kumar Gupta’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The first index in the value array represents error level of a particular rule. It can be one of from one of the following:

• "off" or 0 - turn the rule off
• "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
• "error" or 2 - turn the rule on as an error (exit code will be 1)

Using the above mentioned way you can configure your rules manually. But you can also use configuration that others have created. For this you need to extend from a predefined configuration as follows:

{
    "extends": "eslint:recommended"
}

This will turn on all the rules which are tagged “recommended” in ESLint rules.
You can find other popular configurations from here. For example if you want to use the eslint-config-prettier configuration, you can use it as:

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ],
  "rules": {
    "indent": "error"
  }
}

VS Code Extension Configuration

Until now we have understood how to configure and use ESLint from terminal. But running terminal commands again and again to find issues can be a bit tedious. So VS Code has come up with an extension for ESLint which will highlight ESLint problems while you are writing code in the editor. This can save a lot of time for you.

To use it you first have to install and configure ESLint for your project as mentioned in the above mentioned sections. After that you just have to install the VS Code extension from marketplace. And That’s it. It’s that easy!