Using the ESLint Gem in Rails

ESLint is a popular linting utility for JavaScript. In this post I’ll show you how I use it in a Ruby on Rails app.

A quick intro to ESLint

ESLint lets  you specify how you want to style your JavaScript and it will then check your code and report any issues. For example, if you use the quotes rule to specify that you want to use single quotes everywhere, ESLint will check whether that’s true and report back anywhere you accidentally used double quotes.

Whether you’re a part of a team or working on a project by yourself, ESLint is a great way to ensure clean, consistent code and identify bugs before they ever make their way into production.

The ESLint Gem

Jon Kessler and Justin Force created a handy ESLint gem for Rails. You simplify create a configuration file in config/eslint.json, execute rake eslint:run, and it will check your application.js file for any issues.

If you’re looking for a solid eslint config file, check out the one we at Automattic use for Calypso.

Customing the workflow

I wound up customizing how I use the the gem for two reasons:

  1. The gem checks application.js which concatenates all of your JavaScript assets based on the manifest file. If your assets include third party scripts like jQuery, ESLint will wind up linting those as well which you probably don’t care about.
  2. Similarly, because all of your JavaScript files are concatenated in application.js, the line numbers that ESLint spits out in its report don’t correspond to the line numbers in the individual files, making it difficult to pinpoint the offending lines of code.

To account for this, I first moved all of the third party JavaScript files out of app/assets/javascripts and into app/assets/javascripts/lib. With them moved out of the javascripts directory, I then wrote a new Rake task that takes advantage of the gem’s ability to lint a single file:

With this in place, you can run rake lint:run and it will iterate over each of your JavaScript files within the javascripts directory and execute ESLint on each one:

$ rake lint:run

48:5 low indent Expected indentation of 3 tab chrs but found 4
49:5 low indent Expected indentation of 3 tab chrs but found 4
50:5 low indent Expected indentation of 3 tab chrs but found 4

612:3 slow quote-props Unnecessarily quoted property `class` found
613:28 low quote-props Unnecessarily quoted property `class` found
915:1 low valid-jsdoc Missing JSDoc parameter type for 'reason'

If you also use ESLint in your Rails project, I’d love to hear more about your setup.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s