Eslint with Node JS in Simple Words

For the last two weeks, I have been trying to apply eslint linting to my node project. I have found too many suggestions. Most of them referring to use custom eslint packages such as airbnb , google , standard and many other custom linting packages and attach them with a prettier formatter.

I followed these suggestions to apply eslint to my node project using some of these packages.

Once I applied them to my project they produced too many eslint issues on my code, definitely, that is OK and that is why I wanted to apply eslint to my cod to enhance my code equality 👌

The real issue was that it shows these issues without explaining what is the real reason of them, it just says this short message “prettier/prettier” with non-understandable suggestions to fix these issues solution.

For sure there are some configurations to solve some of them, but it will take a long time to search for every single issue 😔

Honestly, I do NOT prefer to be the fool guy on my projects. I prefer to understand what is going on and if there is an issue on the project I shall know at least partially how to fix it.

Long Story!🙂 I just wanted to explain why I prefer to go with pure eslint rules over additional packages and dependencies. 😎

It is time to start off ⛳

Install Eslint

> npm install eslint --save-dev
            or
> yarn add eslint --dev

Add Eslint

Let’s generate our .eslintrc.json file!

Open your terminal on the project root folder and hit this command:

> npx eslint --init
          or
> yarn run eslint --init

This command promotes you to multiple options, choose the following options:

1. To check syntax and find problems
2. JavaScript modules > commonjs
3. Does your project use TypeScript No/Yes In my case, I am not using TypeScript > No
4. Where does the code run? > Node
5. What format of the config file? > JSON
6. Would you like to install them now with npm? > Yes

After finishing these promote options, a eslintrc.json file will be created with the following configuration:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {}
}

We will add additional eslint rules to this file. So you can override the entire content of this file with the following:

{
  "env": {
    "node": true,
    "commonjs": true,
    "es2021": true,
    "jest": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "no-console": "warn",
    //* Avoid Bugs
    "no-undef": "error",
    "semi": "error",
    "semi-spacing": "error",
    //* Best Practices
    "eqeqeq": "warn",
    "no-invalid-this": "error",
    "no-return-assign": "error",
    "no-unused-expressions": ["error", { "allowTernary": true }],
    "no-useless-concat": "error",
    "no-useless-return": "error",
    "no-constant-condition": "warn",
    "no-unused-vars": ["warn", { "argsIgnorePattern": "req|res|next|__" }],
    //* Enhance Readability
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "no-mixed-spaces-and-tabs": "warn",
    "space-before-blocks": "error",
    "space-in-parens": "error",
    "space-infix-ops": "error",
    "space-unary-ops": "error",
    "quotes": ["error", "single"],
    //
    "max-len": ["error", { "code": 200 }],
    "max-lines": ["error", { "max": 500 }],
    "keyword-spacing": "error",
    "multiline-ternary": ["error", "never"],
    "no-mixed-operators": "error",
    //
    "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
    "no-whitespace-before-property": "error",
    "nonblock-statement-body-position": "error",
    "object-property-newline": [
      "error",
      { "allowAllPropertiesOnSameLine": true }
    ],
    //* ES6
    "arrow-spacing": "error",
    "no-confusing-arrow": "error",
    "no-duplicate-imports": "error",
    "no-var": "error",
    "object-shorthand": "off",
    "prefer-const": "error",
    "prefer-template": "warn"
  }
}

What is the hell you just added? 🤷‍♀️

Calm down bud!!!

we just added "jest": true to env, in case you want to apply unit testing using jestto your node project. Extra rules were added to the rules section as well.

Aaand that's it!

Extra Notes

Why these certain rules?!

Honestly, there are a lot of other rules that you can add, but these rules are quite enough to enhance your code readability and help you avoid bugs. Faire enough!! 🙂

Turn on/off a rule 💡

Each eslint rule has three possible values: off , warn , error . So you can add a rule and give it one of these three values. Also, you can change the value of any of the rules on the previous .eslintrc.jsonfile.

For example one of the rules that we have is "semi": "error" . We can change this rule to only show a warning if you forget to add a semicolon ; by replace error value with warn or you can even turn off this rule by using off value.

Searching for a description of a rule 🔍

You can search for the description of rule, just go to eslint.org and search for it. You will see what this rule is for, how it works in-depth, and what possible values it can take.

Apply auto-fix using --fix option

If you just added eslint to an existing project, most likely many eslint issues that are already on your code will show up. It will be quite difficult to go through all your project files and fix these eslint manually.

Fortunately, there is an awesome command you can run to fix these issues automatically. Hit this command on your terminal:

./node_modules/.bin/eslint --fix

It hopefully fixes most of the issues.

One more thing, you can change any of the previous RULES so they can meet your need.

Hope you understand now how to add eslint to node projects :)

All the previous rules are hosted to this repo and any other rules that I find may enhance my node code I will add to this repo.

Happy Eslint 🎉🎉✨