How To Setup ESLint And Why You Should

If you work on a big project, or even a small project, it is extremely good practice to set up a linting tool.

What is a linting tool?
When you run a linting tool on a file(s), you are running program that will do a static analysis of the source code you run it on. This means that it will perform the analysis of this code without running it.

What this linting does is “flag” problem areas of code, and can even point these out on the fly if you have an editor setup to handle that sort of thing.

Who Should Be Linting?
In short, every developer should. Working with a linting tool when on a solo project can be very helpful in keeping you h0nest and consistent . It can also help limit the potential for bugs and make you more aware of what you are doing.

While using a linter on a project where you are the sole coder is great, it really comes in handy when working with a team. Linting a code base when on a team can provide great benefits. Holding everyone to the same standards and keeping some consistency will go a long way in keeping the code base familiar, readable, and syntactic bugs down.

For a list of Javascript linting tools check out the Site Point article A Comparison of JavaScript Linting Tools which gives a high level overview including pros and cons of JSLint, JSHint, JSCS, and ESLint.

Going Deeper With ESLint
Because most of the front end development I do is react based, I mostly stick with ESLint. I do this because of its great ES6 support as well as its JSX support.

Global Install
If you want to install ESLint for an individual file, you can easily do so by running (assuming you have node installed)

npm install -g eslint

Once you have that installed you need to setup a config file. This package allows you to do that via this command

eslint --init

And finally, you can call eslint on the file

eslint file_to_lint.js

Project Install
A more common setup is the need to run ESLint on a per project basis. For this example, assume you are setting it up on a React project. We can try this on a previous project that was worked on in the article http://www.thedevnotebook.com/2017/02/front-end-tooling-setup-with-react.htmlFront End Tooling Setup With React. You can also download the repo here. Of course, you can also do this to a personal repo as well.

From the root of your project directory (where package.json is), run the following

npm install --save-dev eslint 
npm install --save-dev eslint-loader

I'm using Webpack to build this project. In this case we need to add a rule to the webpack.config.js file

module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|css|templates)/,
        enforce: 'pre',
        use: [{loader: 'eslint-loader'}],
      },

The key line here is the exclude line. This line will avoid listing folders like node_modules or css directories.

Once you are at this point, the only thing to do is add a file in the root of you project called .eslintrc.

I have a basic file setup I use.

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "experimentalObjectRestSpread": true
        }
    },
    "rules": {
        "semi": 2,
        "no-var": 2,
        "prefer-const": 2,
        "max-len": ["error", { "ignoreRegExpLiterals": true,
                                "code": 100,
                                "ignoreStrings": true,
                                "ignoreTemplateLiterals": true,
                                "ignoreComments": true}],
        "no-lonely-if": 2,
        "object-property-newline": 2
    }
}

This file check only for a few things. First in the parserOptions section, you can set the ecmaVersion to 6 which is obviously ES6. Here you can also set the feature to look out for as well. For this example, you can see I set to check in the context of JSX.

You can get a full list of rules and how to implement them right from the source of ESLint http://eslint.org/docs/rules/. You can also do some searching for others .eslintrc files and implement rules that they use. For example, the package eslint-config-airbnb-base allows you to extend Airbnb's .eslintrc file. Keep in mind, if you do this on a large code base, you will probably be spending a lot of time cleaning up code. That is not a bad thing, but it could take some time depending on how bad the code is.

If you notice in my .eslintrc file, in the rules section I have a lot of them set to 2. This means I am setting them to an Error state. For example, I have "semi": 2. This means that if I build my project using Webpack (as I am), and forget a semicolon at the end of a line that should have one, the project will throw an error and not build.

ESLint Error Levels
0 off
1 warn (will build with warnings)
2 error (will fail build)

You can also set this up with many IDEs in order to lint as you go. I use Atom IDE and it is very simple to do this with Atom.

Setup ESLint Within Atom IDE
There are two plugins you need to do this (this also assumes you have ESLint setup on your system and/or project.

If you go to your Preferences Panel in Atom (Atom->Preferences) and then the +Intall section, you can search for install linter and linter-eslint. Search for linter-eslint and linter should show up beneath that as well.

Once installed, you will notice that errors come and go as you are working. This saves a lot of cumulative time over the course of working on a project since you can fix errors live as you are working on them.

One more setting within Atom. If you notice I have a rule set for "max-len", the line length in there is 100. That is 100 characters across. Anything over that will alert and Error. Also notice, that things like comments and strings that are long are ignored and can exceed the 100 character max. To set this in Atom, go to Atom -> Preferences and this time to Editor. Once there you can see a setting for Preferred Line Length. Set that to match the .eslintrc file and you will notice the line within the editor itself be that length while working.

Follow _theDevNotebook on Twitter