How to setup ESLint for your next project

how to setup ESLint for your next project nickang blog banner
Photo by Norbert Levajsics on Unsplash

For over a year, I used ESLint at work without knowing. I didn’t have to understand what package exactly was doing the work of linting – it just worked, quietly doing its duty of enforcing no unused variables and imports, keeping consistent code styles, and all that nice stuff.

But I recently had to learn how to set it up for a project I’m working on on the side – a little concept game unpretentiously called the Object Oriented Ice Cream Shop Game. The name is fortunately temporary until I find a more original name. Among other things, one of the reasons I wanted to do a side project was to learn from linter rules of my own choosing. Quick detour about that, then we’ll cover how to setup ESLint for your project.

Learning from linter rules

I’ll write a full post dedicated to this idea, but in short: I believe it’s possible to learn a ton about programming from the linter warnings that frantically wave at you as you code. And I’m not just talking about language-specific learning points – I’m talking programming in general.

For example, I learned that having trailing commas when writing object or array literals is a good idea because it provides cleaner git diffs. That’s not something I can confidently say I’d have considered until it was made clear to me when my linter underlined it in red and I clicked through on its associated comma-dangle rule on ESLint:

comma dangle eslint linter warning

Nuff’ said. Let’s move on to how to setup ESLint for your next project.

How to setup ESLint

Setting up ESLint for a project is actually relatively pain-free.

First, let’s state one of the most important and often overlooked pieces of information you’ll need to setup ESLint:

There’s ESLint the npm package, and then there’s the ESLint code editor package for Atom/Sublime/etc.

You will need to install both to get ESLint to work as you code. If you install only the ESLint npm package, you will need to run this command every time you want to check your code:

That’s obviously not as powerful as having an omni-present code police.

Here are the steps to setup ESLint for your project:

  1. Run npm install --save-dev eslint to save package to your project’s node_modules folder and have it listed in package.json under devDependencies
  2. Create a .eslintrc.js file in your project root directory for configuring project-specific linter rules (alternatively, run node_modules/.bin/eslint --init to use ESLint’s interactive configuration file generator)
  3. Install the ESLint package for your code editor (Atom | Sublime)
  4. Configure ESLint to your needs, installing additional ESLint plugins for specific rules and style guides (eg. eslint-config-airbnb-base for Airbnb’s), and for libraries (eg. eslint-plugin-jest for Jest testing library)

Configuring .eslintrc

Here is an example of my .eslintrc.js file. Note that I chose to use the .js file format, but you can choose .yml and .json and use slightly different syntax.

With that, you’ll have setup ESLint for your project!

One last point before you go.

ESLint is for ES

One of the reasons I got confused was the fact that there are other linters out there.

Taking a quick look at the code editor packages I have installed shows me 5 different packages:

  • linter
  • linter-ui-default
  • linter-js-standard (for JavaScript)
  • linter-rubocop (for Ruby)
  • linter-sass-lint (for Sass)

If I’m not wrong, the first two are mandatory for setting up a linter mechanism in my code editor (currently using Atom). The last two are for different programming languages.

But the third, linter-js-standard, is for JavaScript! Wouldn’t this conflict with ESLint?

I’m glad you asked because it means you noticed that ESLint is for ES – as in, ECMAScript, or more popularly, JavaScript. ESLint is a specific linter software that comes bundled with a default set of rules for JavaScript.

This is my 6th linter package:

  • linter-eslint (to use ESLint to lint JavaScript)

ESLint is project-specific and I believe has become the de-facto standard tool for linting JavaScript. So when your project has ESLint set up, its code will be linted with ESLint and not the other JavaScript linters.

In fact, the linter-js-standard package has a settings option specifically for making this explicit:

linter js standard setup ESLint

Ok, I think that’s all the linter know-how any of us needs to get up and running.

Now just write code and trust that your linter’s got your back. You should, of course, verify that it’s actually working by deliberately making an obvious mistake… but you already knew that.

Happy days ahead!

Like posts like these? Subscribe to my newsletter to get more useful posts delivered once a month to your email.

Wishing Diigo was a product by Evernote

diigo and evernote
Integrating Diigo and Evernote is possible with a service like IFTTT but nothing beats product ownership

I wish Diigo was a product by Evernote.

Evernote is a brilliant note-taking app. It’s all about getting out of the way of note-taking and being a second, much bigger and efficient brain.

I’ve used Evernote as a premium user for years (including throughout college) and have never felt the need to reconsider my subscription. (Ok, maybe only once or twice, when news of privacy violations leaked, and when they killed the image annotation add-on Skitch.) It’s fast, relatively bug-free, and most importantly, gives someone with the memory of a goldfish like me a superhuman memory.

Diigo is a social bookmarking website that I use to annotate web pages in a buttery smooth way. When I read web pages and want to annotate a page, I can do that with ease and have those annotations both show up on the page when I revisit and appear in my Diigo account’s list of annotations.

I discovered Diigo several years after I started incorporating Evernote into my daily life, and when I did, I struggled for a while to reconcile the fact that Diigo is not by or a part of Evernote.

As a user, I feel bummed out. Although it rarely happens, sometimes we do find a product that feels like a natural extension to an existing product or service, and it’s like magic. That is until you realise the product is not made by said existing product or service. Bummer.

I’ll be more specific:

  • Whenever I annotate a webpage, it’d be great if those annotations get synced to my Evernote account (instead of Diigo) so that I can have one, not two, external brains
  • Ideally, the entire page gets clipped and synced with highlights and worded annotations to my Evernote account (Evernote Web Clipper does this partially, but doesn’t have inline comments)
  • Diigo’s Outliner feature is amazing, and I wish Evernote had something similar that allowed me to create a coherent outline as I read different web pages for information about a particular topic

I realise I may sound a little unfair towards Diigo by saying all this, but I think I mean this as a compliment. Diigo is an amazing tool (and it’s free), and I’ll continue using it for its various killer features. I just wish they would integrate seamlessly.

As I am writing this, I did a quick search for Diigo and Evernote integrations and there seems to be hope after all, in the form of an IFTTT (if this then that) protocol. I know I’ll be trying that!

Hopefully, a team in Evernote is already working on something like this, or perhaps someone in their mergers and acquisitions team is busy… what, a man can fantasise, can’t he?

(Then again, it might add to Evernote’s five percent problem. I’m not sure how to reconcile my selfish want and their business strategy.)