Common mistakes you can avoid with ESlint

ESlint is a pluggable linting utility for JavaScript and JSX.

On a today’s real world JavaScript web app, the complexity tends to grow, refactors will be needed, and although you probably know what you are doing, linting your code can save you a lot of headaches.

Besides styling, 2 spaces vs 4 spaces vs tabs, semicolon vs no semicolon, and so on, with just this configuration, you can catch the most frequent mistakes that I find myself and others doing:

//.eslintrc.json at the root of the project with ESLint 2.x.x:
{
    
    "extends": [
        "eslint:recommended", 
        "plugin:react/recommended" // optional, if using react
    ],    
    "env": {
        "es6": true,
        // your environment, node and/or browser:    
        "node": true, 
        "browser": true
    },
    "plugins": ["react"], // optional, if using react
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true  // if using jsx
        }
    },
    "rules": {
        // just some styling rules here or extra rules
    }
}

Install ESlint on your project:

npm install eslint --save-dev

If you are using React, you can install eslint-plugin-react for more linting rules and add it to your eslint configuration as stated above:

npm install eslint-plugin-react --save-dev

Then, configure your text editor and/or build tools as stated here.

Scope and ReferenceErrors

You master scope in JavaScript, sure, but take a look at these common mistakes. Surely you did one of them at least once (especially when refactoring): importing the same module a second time, importing a module but never using it, forgetting to export your React component or your module, block-scope declarations or simply forgetting to define a var in your scope (or misspelling one).

ESlint rules: no-redeclare, no-unused-vars, no-undef, no-console

Leading commas and trailing commas

There is some debate regarding the pros vs cons of the use of leading commas in object literals or arrays, as well as the use of trailing commas.

I’m not discussing it here. Just letting you know that if “Haskell like” leading commas it’s not your thing, ESlint can help you minimize the “forgotten” comma when adding and removing items to objects and arrays. And you can also opt between allowing, requiring ou disallowing trailing commas. Of course, ESlint can’t help you here with the argument of clarity of diffs.

comma-dangle

Specific to JSX

In html5, you can skip closing the self-closing tags. In JSX, all tags must be closed, either with the self-closing format or with a corresponding closing tag.

And yes, you know it, all adjacent JSX elements must be wrapped in a enclosing tag, but a just in time warning doesn’t hurt:

It’s not all

Although I used the above cases to illustrate the utility of ESlint, the recommended configuration of ESlint covers much more, and many times it’s all you need. You can always replace or add more rules depending on your team or preferences. Or you can use some common configurations out of the box with eslint-config-standard-react or eslint-config-airbnb. Or you can choose another linter.

But the bottom line here is: with little effort, you can save yourself and your team a lot of time and a lot of headaches.

Happy coding!