Linting React using Airbnb's ESLint Rules

ESLint works with a set of rules you define. Our basic configuration contains just one such rule: strings should be written inside single quotes rather than double quotes. You can add more if you want, but it's more common to find an existing set of rules that come close to what you want, then customise from there.

Arguably the most common linting rules around are by Airbnb, which bills itself as "a mostly reasonable approach to JavaScript." And it's true: their linting rules are popular because they are simple, sensible, and beautifully consistent.

We're going to install their Airbnb rules for ESLint and see what it makes of our source code. Run this command in your terminal window:

npm install --save-dev eslint-config-airbnb

We now just need to tell ESLint that our own rules extend their Airbnb rules. This uses the Airbnb rules as a foundation, adding our own overrides as needed. Modify your .eslintrc file to this:

.eslintrc

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "extends": "airbnb",
    "rules": {
        "indent": [2, "tab"]
    }
}

There's still only one rule in there, but I've modified it to something deeply contentious because we're almost at the end now so I feel it's safe to take some risks. This new rule means "make sure I use tabs for indenting rather than spaces," and if that doesn't give you enough motivation to search for ESLint configuration options, I don't know what will! (Note: if you either don't want tabs or don't want to figure out how to set something else in the linter options, just delete the rule.)

Anyway, save your new configuration file and run npm run lint in your terminal window. This time you'll see lots of errors fill your screen, all telling you what the problem was as well as a filename and line number. Note that these errors are all stylistic rather than actual bugs, but like I said it's important to fix these issues too if you want clear, clean, maintainable code.

Let's tackle the easy ones first, starting with "Newline required at end of file but not found". You might see this one a few times, and it's trivial to fix: just add a blank line to the end of every file where you see this warning. Another easy one is "Missing trailing comma," which just means that code like this:

this.state = {
    events: []
};

…needs to be rewritten to this:

this.state = {
    events: [],
};

The extra comma doesn't add much, but it does reduce the chance of you adding more properties without first adding a comma. Warning: don't do this in JSON files such as package.json, because many parsers will be deeply unhappy.

There are two more easy ones to fix if we choose. First, "Unexpected console statement" just means ESLint doesn't want us to use console.log() in our code, but this is only a warning not an error so I'm happy to ignore this in my own code – it's down to you if you want to remove them in yours. Second, "'Link' is defined but never used" in User.js. To fix this problem, change this line:

src/pages/User.js

import { IndexLink, Link } from 'react-router';

…to this:

src/pages/User.js

import { IndexLink } from 'react-router';

Unless your code is very different from mine, that should fix all the easy linter errors. Now it's time for the harder stuff…

Copyright ©2016 Paul Hudson. Follow me: @twostraws.