JavaScript linting: moving from JSHint and JSCS to ESLint

I recently read a couple of articles that convinced me to try ESLint:

blog.lauritz.me/linting-javascript-in-2015
sitepoint.com/comparison-javascript-linting-tools

We went ahead and implemented ESLint for the WebRTC samples repo, and we’re really pleased with the results. JSHint and JSCS are both brilliant tools, but ESLint provides more functionality than both of them combined. It’s quick, too: checking the 23 WebRTC samples main.js files in a couple of seconds, for 30 customised rules (along with the defaults).

If you want to do the same yourself, here’s a quick how-to for making the move from JSHint and JSCS to ESLint.

1. Create an eslint branch for your repo.

2. Run npm install grunt-eslint --save-dev to install ESLint and add it to your package.json file. Remove JSHint and JSCS from package.json.

3. Create an ESLint .eslintrc config file (or adapt ours). Add rules, globals and other settings based on your existing JSHint and JSCS config. Note that rules marked ‘recommended’ in the ESLint documentation are run by default.

@slicknet pointed out that there’s a tool for this: github.com/brenolf/polyjuice.

4. Remove .jshintrc and .jscsrc files.

5. Replace JSHint and JSCS build tasks with ESLint — for example, in Gruntfile.js or gulpfile.js. Likewise for Git hooks and test scripts.

6. Install ESLint for your text editor and turn off JSHint and JSCS linting.

7. Remove or replace references to JSHint and JSCS in your JavaScript files, such as inline rule settings. The following ESLint declarations can be used instead:

... // eslint-disable-line new-cap

/*eslint-disable */

/*eslint-enable */

Global declarations are the same:

/* global Fubar */

8. Run ESLint for your files and fix them as necessary. (This is much easier if you already have ESLint installed for your editor.) You can also run ESLint from the command line with the --fix parameter to automatically fix some errors, such as spaces in arrays or function definitions.

9. Test all the files that you changed.

10. Make a pull request for the eslint branch, get an LGTM and merge it.

That’s it!

.eslintrc config file for WebRTC samples repo

.eslintrc config file for WebRTC samples repo

Advertisements

About Sam Dutton

I am a Developer Advocate for Google Chrome. I grew up in rural South Australia, went to university in Sydney, and have lived since 1986 in London, England. Twitter: @SW12
This entry was posted in Code linting, git, GitHub, JavaScript and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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