ESLint

There are several reasons for using a code linting tool, all of which are for our benefit, so adopting one and using it is time well spent. To be honest though, once setup and you're happy with the rules then it is time that you don't have to spend at all. There are many linting tools you can use but today I'm focusing on ESLint, read on...

What do linting tools do?

They review our amazing code and check for errors or warn of potential issues. They act as an early warning system and can run automatically as we type, run manually or run when we build - its all up to you. So anyways, the linting keeps our code consistent to the rules we define. This is good for us but really good when working in teams to keep all code consistent no matter the fingers that typed it. Linting tools can spot certain type of errors, they can identify issues as well as redundant code.

Overall, linting keeps the code tidy and helps improve the quality of the code we commit.

ESLint

ESLint has been around a while and its now the linting tool I use when writing Javascript code. My reasons for adopting this tool are because it integrates with both JetBrains Webstorm and Microoft Visual Studio Code which I use regularly...plus its really good too! It has a good set of built-in recommended rules as well as plugins to add specialised rules, or you can simply write your own.

Installation

Installing into your Javascript project is simples:

npm i eslint --save-dev

(Yes, you could install globally too)

Then run the wizard to build a configuration file, simply call it by:

./node_modules/.bin/eslint --init

This'll fire a bunch of questions at you asking what rules you want the tool to check and what environment the project is targeting. The output will be a file named .eslint.json and depending on your answers to the question may end up with a file like below. Note, I strongly recommend extending from an existing popular style guide.

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Running ESLint

Because we've installed ESLint locally, the command to run the linting is:

./node_modules/.bin/eslint *.js

and we can put this into our package.json file like so:

"scripts": {
    "lint": "./node_modules/.bin/eslint *.js"
}

and calling:

npm run lint

Depending on the quality of your code you may see some errors and warnings. If not, purposely change your code to try out some of the rules.

Now you have the config file you can manually enter new rules, change error/warning levels and import third party modules.

Fixing Liting Issues

Now this is the stuff I really like. Yes, you can manually edit your code and fix the issues...or you can use a really neat command built-in to ESLint - the fix. Its cool, simply run the lint again but with a flag and it will attempt to resolve all the issues it finds. I prefer to run just the lint first, review the findings and and then send in the troops by running lint again with the fix flag, so I have 2 package.json scripts:

"scripts": {
    "lint": "./node_modules/.bin/eslint *.js"
    "lint-fix": "./node_modules/.bin/eslint *.js --fix"
}

Conclusion

Setting up can take a small amount of time but its a great investment. From then on you can get your IDE to auto check as you type or run linting when you build your code.