What are Eslint rules?

Eslint is a tool that identifies and reports syntax errors in Javascript/ECMAScript code. This tool is useful because it helps ensures consistency and minimizes unwanted errors.

Eslint can be installed manually into a project. If you are using a Javascript framework, most of them come pre-packaged with eslint as a devDependency.

Features of Eslint

1. Rules:

Eslint is able to identify syntax errors thanks to rules. Rules are restrictions that a given block of code must follow. Eslint comes with its own set of rules but you can create custom rules for your personal project or organization project. Custom rules are created as plugins. To get started with creating your own custom rule, you can use this well-detailed guide.

2. .eslintrc.* file:

To be able to configure new / existing eslint rules, you will need to create this file. It can be a .js, .json or .yml file.

Adding the line of code below turns on all eslint rules that are marked recommended.

{
    "extends": "eslint:recommended"
}

How rules are configured in .eslintrc?

Before we add a new rule, let's look at the snippet of code below to learn how to turn on/off an eslint rule.

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

As you can see above, rules are defined within the rules object. To configure a rule, you will need to set the rule ID which can be defined as any of the three values below;

• "off" or 0 - this turns off the rule so it has no effect on your code

• "warn" or 1 - this turns the rule on as a warning and doesn't affect exit code.

• "error" or 2 - this turns the rule on and terminates code execution with exit code 1 if the rule is not passed.

For example in the code above, the semi rule and the quotes rule are turned on as errors.

These rules can also be configured using Configuration comments eg

/** eslint semi: "error", quotes: "off" */

Example of Eslint rules

1. no-console

When debugging code, we often use console.log. Unfortunately, it is very common to leave the console method in your code when pushing to production. This will not have negative side effects on your application, however, it is considered "unprofessional".

The no-console rule disallows the use of console.

// .eslintrc.json
{
      "rules" : {
              "no-console": "error"
      }
}

// custom console
Console.log("Hello world!");

For more information on this rule, check out this resource.

2. no-eq-null

Making comparisons with null can have undesirable outcomes like false outputs which can be missed by anyone that lacks an understanding of how Javascript handles null values.

The no-eq-null rule disallows null comparisons without type-checking operators.

// .eslintrc.json
{
      "rules" : {
              "no-eq-null": "error"
      }
}

// your code
if (foo === null) {
  bar();
}

while (qux !== null) {
  baz();
}

For more information on this rule, check out this resource.

---

Thank you for reading till the end. Like, leave a comment, and share with your network if you found this piece helpful.

Reading resources

1. Eslint documentation - the documentation is well-detailed and easy for beginners to dive in.
2. Eslint playground - If you want to test an eslint rule before you add them to your project, this online tool is a great place to play with the eslint plugin.