« Previous Tutorial Next tutorial »

Welcome back. Feels good to be writing some actual code, right? But now it’s important that we make sure our code is consistent and readable as we start to produce lots of different files. This becomes doubly important if more than one engineer is working on the project. Fortunately, there are programs out there that can go over your JavaScript and check it for consistency. This is called linting, and we’ve already talked about it a bit back in the second tutorial in this series, when we set up Sublime Text with an integrated ESLint package.

Well, now we’re going to activate that package, like a nefarious criminal organization activating a sleeper agent, except this time instead of spending two movies moping while hesitantly forging a tender romance with Captain America, our sleeper agent is going to highlight consistency issues in our code.

ESLint isn’t just a Sublime Text package. Actually, it’s not a Sublime Text package at all. It’s a Node module that can be run in a lot of ways, including via the command line. The package we installed for Sublime Text ties in with ESLint, so we need to install the node module. We also need to create a file called .eslintrc in the top level of our application folder, which will contain the rules that we want ESLint to follow (for example, two-space indentation instead of tabs, which has become the standard for most JS development).

Now, setting up all of the many, many, many rules ESLint can pay attention to would be tedious and obnoxious. Thankfully, the good people at AirBnB have mostly done it for us. Their ESLint defaults, which conform to their publically available JavaScript style guide, are a great starting ground and are very popular among JavaScript developers. We’re going to use them, although down the road we may add a few overrides depending on the situation.

Head to a terminal window or command prompt, because we’re gonna globally add a whole bunch of stuff! We’ll start with ESLint and various ESLint modules we need for AirBnB’s settings to work. The dependencies are specific versions, so we need to run the following command:

npm info "eslint-config-airbnb@15.0.1" peerDependencies

which will result in a list that, at the time of this writing, looks like this:

{ eslint: '^3.19.0',
  'eslint-plugin-jsx-a11y': '^5.0.1',
  'eslint-plugin-import': '^2.2.0',
  'eslint-plugin-react': '^7.0.1' }

We can add all four of these, along with the AirBnB settings, with a one-line command by typing the following and hitting enter:

yarn add --dev eslint-config-airbnb@15.0.1 eslint@^3.19.0 eslint-plugin-jsx-a11y@^5.0.1 eslint-plugin-import@^2.2.0 eslint-plugin-react@^7.0.1

Note that if the version numbers you’re getting are different, you should use those ones, and not the ones listed here. Once you hit enter, this will take a bit. When it’s done, we should have everything we need to install. Switch back to Sublime Text and create a file in the top level of your app called .eslintrc. The first thing we’re going to do is import AirBnB’s settings, so add the following:

{
  "extends": "airbnb"
}

Save the file and close any .js files you have open. From here on out, your built-in linter should show you warnings and errors. Let’s open app.js and, as you can see, we’ve got plenty of stuff to fix! Note that if you move your cursor to any line with an error, you’ll see the error’s description at the bottom of sublime text.

Let’s take a look at a few of these. On line 3 we get an error because we’re defining favicon but never using it, because it’s commented out on line 25, which has its own error due to a missing space between the double slashes and the start of the comment. We can fix line 25 but will have to deal with line 3, because uncommenting the favicon line will break your app entirely (unless you make a favicon – it's up to you!).

Line 33 is missing a trailing comma – that’s something some developers love and some hate, but it’s generally considered good practice in the react world to have trailing commas in your multi-line objects and arrays. It means if you ever need to add anything else, you’re less likely to encounter a dumb bug because you forgot to stick in a comma on the line above. So, let’s add it.

OK, line 34 is an interesting complaint. AirBnB thinks you should do all of your requires at the top of the page (or at least in a single block), and if you must inline them for some reason, you should at least give them some breathing room. Let’s get this up to the top. Under line 9, add the following:

const expressSession = require('express-session')({
    secret: 'some random string goes here',
    resave: false,
    saveUninitialized: false
});

and then change our app.use line on what is now line 35 to:

app.use(expressSession);

Same deal with line 45:

const User = require('./models/user');

… we’re doing a require in the middle of the code. In this case, since we’re already assigning it a variable, we can just move it up to the top, underneath line 14, so do that.

Our final error is something of a pain. Express’s middleware functionality—the stuff that runs between the server receiving a request and sending a response—needs us to include that “next” variable even though we’re not personally calling it. Fortunately, ESLint allows for rule exceptions, so let’s add one. Open your .eslintrc file back up and make it look like this:

{
  "extends": "airbnb",
  "rules": {
    "no-unused-vars": ["error", { "argsIgnorePattern": "next" }]
  }
}

Save the file and refresh app.js (either by closing and reopening it or, my preferred method, hitting space, backspace, and ctrl-s), and the error should go away. If you don’t like the idea of disabling this error for any variable in your code named next then you can ignore the eslint change above and instead manually add a comment at the end of any line, telling ESLint to ignore that error, like this:

app.use((err, req, res, next) => { // eslint-disable-line

Or, of course, you can just ignore the error!

All right, we’ve got more errors to fix in other files. In the next tutorial, we’ll go over how to use the command prompt to identify ‘em all at once, rather than having to open each file manually in Sublime to check for issues. Catch you then!

« Previous Tutorial Next tutorial »