ESLint and the beauty of JavaScript Linting

Alright, it is time for some developer stuff again! 🤓

Ever heard of "Linting"? It´s basically checking out your code for potential errors. As always in the JavaScript world, there are a lot of different tools to choose from and they can do the Linting on the fly while you type your code:

The most famouse ones probably are "JSLint", followed by "JSHint" (a fork of JSLint, less opinionated and with more options) and then "ESLint". Forget about JSLint and JSHint, ESLint is all you need, because it is highly modifiable and it´s the only Linter that supports plugins. Which is great if you want to use React (like all smart people), because there is eslint-plugin-react.

Setup

If you just want to use ESLint in all your projects (and i highly recommend that!), just install all the necessary tools globally with npm:

• npm install -g eslint
• npm install -g eslint-plugin-react
• npm install -g babel-eslint

You can also just combine them, of course:

• npm install -g eslint eslint-plugin-react babel-eslint

This will install ESLint, the ESLint React Plugin and a special parser that understands experimental/new JavaScript features. If you don´t know what Babel is: It turns new JavaScript code into older one for older browsers not supporting all the fancy features.

Example .eslintrc

We´re all set up with the tools we need, there is only one thing left to do: Place a .eslintrc file in the root folder of all your projects. It tells ESLint which parser and plugins to use, and which rules to apply to your code. Here is an example how that file could look like:

{
    //choose babel parser instead of default one
    "parser": "babel-eslint",

    //activate react plugin
    "plugins": [
        "react"
    ],

    //set default/recommended rules as basis
    "extends": ["eslint:recommended", "plugin:react/recommended"],

    //additional parser options: https://eslint.org/docs/user-guide/configuring
    "parserOptions": {
        "ecmaVersion": 8,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "experimentalObjectRestSpread": true
        }
    },

    //this sets some predefined global vars depending on the environment
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },

    //set global vars
    "globals": {
        "Phaser": false,
        "Steemit": true //true means that you are allowed to override it
    },

    //http://eslint.org/docs/rules/
    //0 - off, 1 - warn, 2 - error
    "rules": {
        "quotes": [2, "single"],
        "indent": [2, "tab", {"SwitchCase": 1}],
        "max-statements": [1, 20],
        "max-depth": [1, 3],
        "complexity": [1, 10],
        "no-unused-vars": [1, {"varsIgnorePattern": "styles|React"}],
        "no-console": 2,
        "semi": 2,
        "no-empty": 1,
        "react/prop-types": 1,
        "react/no-array-index-key": 1,
        "jsx-quotes": [2, "prefer-double"],
        "no-multiple-empty-lines": [2, {"max": 1, "maxEOF": 1}],
        "no-var": 2
    }
}

Check out the docs for additional information about a specific rule or feel free to ask me about the existing ones in the file!
You are probably using some editor/IDE like Atom or Webstorm already/hopefully. In Webstorm you can just activate ESLint in the settings, in Atom there is a plugin for it. They all take the .eslintrc file from the root folder.

Are you using ESLint (or something else) already? What´s your configuration and why?