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](https://www.npmjs.com/package/eslint-plugin-react).

![032f30a0-f2e1-11e5-8676-4676c2ca102a.png](https://steemitimages.com/DQmYrpGZqdTS1JotjpoYx39BEbZt1WivdWcymkcRtjmNNVC/032f30a0-f2e1-11e5-8676-4676c2ca102a.png)

## 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:

```JSON
{
    //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?