Quick Tip: Using JSLint


It’s nothing to be ashamed of: you probably don’t write perfect JavaScript the first time. While debugging JavaScript is usually done manually, today’s quick tip will teach you how to use JSLint, a tool for catching JavaScript bugs. Think of it as spell-check for JavaScript.


Screencast


What is JSLint?

Here’s Wikipedia’s definition of a Lint program:

In computer programming, lint was the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in C language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language.

JSLint is one such program for JavaScript, written by Douglas Crockford (of course). You hand it your JavaScript and it let’s you know what to fix.


How do you use it?

After you head over the JSLint Website, the first step is to choose the practices you want to enforce; you can choose the Crockford-recommend settings by clicking the “Good Parts” button.

Then, paste in your JavaScript and hit the JSLint button. If you’re code is less than perfect, you’ll get a list of errors to fix.


Before JSLint

(function () {

	var anObject = {};
	var anElem = document.getElementById("wrap");
	var aString = "This is a string"

	if (aString === "This is a string") {
		anotherString = aString;
	}

	function person(name, age) {
		this.name = name;
		this.age  = age;
	}

	var aPerson = new person("John", 25);

}());

After JSLint

/*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
"use strict";
(function () {

	var anObject = {}, aPerson, anotherString,
		anElem = document.getElementById("wrap"),
		aString = "This is a string";

	if (aString === "This is a string") {
		anotherString = aString;
	}

	function Person(name, age) {
		this.name = name;
		this.age  = age;
	}

	aPerson = new Person("John", 25);

}());

Where can I learn more about JSLint?

This page explains in depth the concepts behind JSLint. Thanks for reading and watching!

Leave a Reply

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