Using Linters For Faster, Safer Coding With Less Javascript Errors

Rickard DahlstromJavascript, Tech Stuff, Web Development9 Comments

Command pallete

A few weeks ago I wrote an article about great Javascript debugging tips that many developers weren’t aware of. The article had a lot of traffic and was well shared. Today I will focus on how to discover bugs and Javascript errors before they even become a bug. Sounds odd? The magic we will discuss here is called a linter and I will explain what it is, why to use them and compare them so you know what will work best for you.

javascript-linters

What is a linter?

Linters have been around for a long time and probably exist in one shape or form for all languages. A linter is basically a parser that parses your code and looks for mistakes. It’s a great way to save time, maintain quality and write safer code. You can plug linters in to your code editor or copy-past your code to a linting tool. Lint-ing your code is a great thing to do no matter what language you code with. You can even lint HTML, CSS and JSON. There are many different types, but here I will focus on the four most popular Javascript linters.

Workflow comparison

Example workflow WITHOUT linter.

  1. Write some code
  2. Save your code
  3. Refresh the page and wait for the page to load
  4. The inspector found an error
  5. You inspect the error and it says something like… “Uncaught SyntaxError: Unexpected identifier on line 43 file…”
  6. You think “that’s kind of a cryptic message”. You return to the code to see what’s actually causing the problem on line 43
  7. Ah, you missed a comma between your variable declarations
  8. You add the comma… var variable1 = 1, variable2 = 2;
  9. Then you save the project and walk yourself through the whole process again, thinking “wow, this is a bit time consuming. I really hope I didn’t miss a comma somewhere else”

Example workflow WITH linter

  1. Write code. In the meantime the linter tells you about your syntax errors.
  2. You fix your mistakes
  3. Save your code
  4. You smile and think “wow, this is the future”

linter-vs-no-linter

Benefits of using a linter.

  1. Get instantly notified of your mistakes
  2. Save time
  3. Safer code
  4. You can stay focused on the hard part of your coding
  5. Better coding flow
  6. Obvious highlighting in your code
  7. Your team will follow the same coding style
  8. It’s just more fun. It’s like magic

Which Javascript linter should I use?

There’s a few of them out there so I’ll give you a quick walk through of some of them.

JsLint: Douglas Crockford is like the father of the Javascript linter. He started the development in 2002 with roles he well discussed in his book – Javascript the good parts. JsLint is his own project and he keeps on updating it by himself. JsLint is the oldest out of the ones mentioned here.

JsHint: Is a community driven open source project that started in 2010. It started as a fork of the JsLint project. Since more people are developing JsHint it’s been improving and changing more than JsLint. They removed some rules and added new ones that would better suit the way a Javascript developer codes today. JsHint is today a more flexible linter and it’s the most commonly used.

EsLint: Is open source and started in 2013. The founder says he love JsHint but found himself in need of a more pluggable linter. The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable. It ships with a basic set of rules to get started with, then it’s up to you what rules you want to change or implement. This is the linter for the person who needs to add and change linting rules. If you’re not one of those people, maybe one of the other three linters would be a better choice.

Jscs: Started 2013 and ships with 90 validation rules (or 120 according to their github), including presets from popular style guides. This is great so we don’t need to come up with our own style-guides over and over again. Here’s a list of presets Jscs provides.

  • Airbnb
  • Crockford
  • Google
  • Grunt
  • jQuery
  • MDCS
  • node-style-guide
  • Wikimedia
  • WordPress
  • Yandex

But, I still don’t know which one to use.

Well, maybe it’s easiest to just follow the bigger mass. This is the download history for the last month from npmjs.com 6th July 2015.

  1. JsLint: 38,210 downloads
    npmjs.com/package/jslint
  2. JsHint: 1,635,776 downloads
    npmjs.com/package/jshint
  3. EsLint: 363,212 downloads
    npmjs.com/package/eslint
  4. Jscs: 366,619 downloads
    npmjs.com/package/jscs

Let’s see who is using what…

Who is using JSLint?

¯\_(ツ)_/¯ I couldn’t find anything.

Ah, but who is using EsHint?

Again….. ¯\_(ツ)_/¯

Ah, but who is using JHint?

Mozilla     Wikipedia     Facebook     Twitter     Bootstrap     Disqus     Medium

Yahoo!     SmugMug     jQuery     PDF.js     Coursera     Adobe Brackets     Apache Cordova

RedHat     SoundCloud     Nodejitsu     Yelp     Voxer     EnyoJS     QuickenLoans     oDesk

Cloud9     CodeClimate     Pandoo TEK     Zendesk     Apache CouchDB

And who is using Jscs?

jQuery      Adobe     Bootstrap     AngularJS     Yandex     Wikimedia     Grunt

Ember.js     Ionic     Moment.js     TodoMVC      Famous     less.js     Goodvidio


Since there are heaps of code editors and a bunch of linters, I will focus on just one editor. Since I’m using Sublime Text 3 on Mac, this should give you a good demonstration. Don’t worry if you’re not a Sublime Text 3 user, I’m sure Google will be there for you to find information for other setups. With that said this guide may still be useful for you. Here’s how to install linters in Sublime Text.

Installing a pre installed linter like JSLint

JsLint is preinstalled with SublimeLinter so all you need to do to get started is…

  1. Make sure you’ve installed sublime package control.
  2. Install sublimelinter, which is the base package for the linters.
  3. Now. Restart Sublime and open a JavaScript file. Make sure you have some syntax errors in your code. Then hit save.
  4. You should now see something like this…

JsHint lint errors

Installing a NOT pre installed linter like EsLint

  1. Make sure you’ve installed SublimeLinter3 and it’s working.
  2. Install the linters you want. e.g cmd+shift+p and type sublimelinter-eshint
  3. As you can see all linters starts with sublime-linter-[linter name]Command pallete
  4. Once we have installed it in the editor we need to install it on on the computer. Sublime linter are using the node package manager so we have to install them as well.
  5. Open the terminal and type $npm install -g eslint
  6. Once that is installed you want to navigate to your project directory and type $eslint –init
  7. The prompt will now ask you how you want your linter to be set up. It will create a settings file you can change at any time.npm eslint set up questions
  8.  Now. Restart sublime and open a JavaScript file and make sure you have some syntax errors in your code. Then hit save.Sublime eshint

Linting tips

You’ll find all you need under Tools->SublimeLinter. Here are some good things to know.

I can see the lint dots but what do they mean?

They easiest way to find out is simple click somewhere on the line and in the bottom list of sublime you can see the message.

Lint modes

Two settings worth mentioning are Lint Mode->Load/Save and Lint Mode->Background

Load/save will lint your file every time you load and save. Background will instantly lint your file while your’re typing.

Tips if you’re using background mode

I prefer the background mode but without right settings it can be quite annoying when all colors are shifting constantly.

Longer delay time and weaker color settings make it much better. Open Sublimelinter-sublime.settings and change to following values.

  • mark_style: stippled underline
  • lint_mode: background
  • delay: 2
Color exapmle of SublimeLinter

JsHint

EsLint is not showing all errors in Sublime

One difference between EsLint and JsHint is the presentation of lint errors. EsLint only shows the top error while JsHint shows all at once. Compare the pictures above and below. Without any further investigation I believe it is a Sublime thing since the demo on EsLints website shows all errors at the same time.

EsLint sublime linter

EsLint

Jump between your lint errors

A really good feature I also want to mention is the jump-between-lint-errors feature.

Let’s say you have a bunch of lint errors, you can hit cmd+ctrl+a and you can navigate between the lint errors with your arrows keys. Pretty awesome when you are linting big chunks of code to find errors.Jump between lint erorrs

Get more help with debug = true

Debug is by default false but if you set it to true the linter will output all messages in the console. Pretty handy sometimes.

Summary

I hope the namings didn’t confuse you. I would expect to see something called EsHint in the future… or why not LintHint?

I hope you found this article useful, and if you still don’t know what linter to pick you can probably go for JsHint since it’s the most popular one, it’s well maintained and been around for a while.

No matter what linter you pick, the difference between using one and not using one is big. Bring some light to your work desk and have fun.

Discovering problems before they even become a problem is great. Fixing bugs is even greater but knowing what errors went live is invaluable. I can’t raise enough glasses for Raygun, the error tracking tool that keeps track of all errors your users experience. Sign up for a trial here. 

I would also recommend you to read some of my previous articles on a similar topic.

And if you’d like to speed up your coding

Links and resources

We would absolutely recommend Raygun to any business which relies on healthy software to serve there customers. Andrew Schofield, Chief technology officer at Timely. Take a free 14 day trial. Request a short demo of Raygun.

9 Comments on “Using Linters For Faster, Safer Coding With Less Javascript Errors”

  1. Tyler

    It should be noted that JSHint is geared toward syntax and JSCS is more about style. In fact JSHint has deprecated several rules in favor of having the JSCS project handle them, and thus more clearly defining the difference between the two. So you can use the two projects in tandem. JsLint and EsLint I’ve not used.

  2. Wilson Silva

    Interesting article. I use a combination of JSHint, ESLint and JSCS, because each have their own pros and cons. By the way, did you mean “Ah, but who is using ESLint?” up there?

  3. Josh H

    Thanks for the round-up of lint tools. It’s worth mentioning, for JS, there are other static code analysis tools such as typecheckers like Flow by Facebook, which can help find bugs more dynamic using type inference. And then there’s CoffeeScript (which also has a linter), a compile-to-JS language useful in avoiding errors at all by allowing developers to write code in an more expressive and less error-prone way.

    1. Rickard Dahlstrom

      Standard is new to me. After a quick research it seems lite the main focus is to simplify the implementation even more. To compare with above npm download history Standard had 80,491 download last month. (7th sep 2015). Why do you prefer Standard?

  4. Benny Neugebauer

    Thanks for this useful overview! I had a tough choice between ESLint and JSHint. Because ESLint is newer and has better documentation I wanted to go with ESLint but there is very good JSHint support integrated in JetBrains’ WebStorm and NetBeans IDE. So in the end I went with JSHint. 🙂

  5. Pingback: JavaScript Linters, even in your IDE! - Genuitec

Leave a Reply

Your email address will not be published. Required fields are marked *