Using JSLint For Faster, Safer Coding With Less Javascript Errors

By Rickard Dahlstrom | Posted Jul 9, 2015 | 8 min. (1536 words)

A few weeks ago I wrote an article about great <a href="/blog/javascript-debugging/"" target="_blank" rel=“noopener”>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 JSLint, explaining what it is, why to use linters and compare commonly used linters so you know what will work best for you.

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

Write some code
Save your code
Refresh the page and wait for the page to load
The inspector found an error
You inspect the error and it says something like… “Uncaught SyntaxError: Unexpected identifier on line 43 file…”
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
Ah, you missed a comma between your variable declarations
You add the comma… var variable1 = 1, variable2 = 2;
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

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

Benefits of using a linter.

Get instantly notified of your mistakes
Save time
Safer code
You can stay focused on the hard part of your coding
Better coding flow
Obvious highlighting in your code
Your team will follow the same coding style
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.

JsLint: 38,210 downloads

<a href="https://www.npmjs.com/package/jslint" target="_blank" rel="noopener">npmjs.com/package/jslint</a>

JsHint: 1,635,776 downloads

<a href="https://www.npmjs.com/package/jshint" target="_blank" rel="noopener">npmjs.com/package/jshint</a>

EsLint: 363,212 downloads

<a href="https://www.npmjs.com/package/eslint" target="_blank" rel="noopener">npmjs.com/package/eslint</a>

Jscs: 366,619 downloads

<a href="https://www.npmjs.com/package/jscs" target="_blank" rel="noopener">npmjs.com/package/jscs</a>

Let’s see who is using what…

Who is using JSLint?

Ah, but who is using EsHint?

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…

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

Installing a NOT pre installed linter like EsLint

Make sure you’ve installed SublimeLinter3 and it’s working.
Install the linters you want. e.g cmd+shift+p and type sublimelinter-eshint
As you can see all linters starts with sublime-linter-[linter name]
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.
Open the terminal and type $npm install -g eslint
Once that is installed you want to navigate to your project directory and type $eslint –init
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.

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

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.

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.

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 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.

Capturing JavaScript Errors and Performance Issues

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.

<a href="/blog/javascript-debugging/"" target="_blank" rel=“noopener”>Useful javaScript debugging tips you didn’t know
javaScript debugging with black box.

And if you’d like to speed up your coding