Quick Tip: Using JSLint
Tutorial Details
- Topic: JavaScript Lint
- Difficulty: Basix
- Estimated Completion Time: 4 Minutes
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 lets 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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrew Burgess
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Hadn’t heard of that, but it looks great. The extent of my JS error checking has been upgraded beyond just fixing breaks. I love “best practices” tutorials. Keep ‘em coming!
Very nice tip, will help with future projects
what happened to hosting the video on multiple sites? i cant access youtube from work.
Use a proxy server! Foxy Proxy is a great Firefox plugin.
You can get it on Screenr: http://screenr.com/aXA
Thanks!
Hi,
I’m used to screenr, it’s just good and works. Youtube here is banned, so I can’t get the video. Any reason why nettuts moved to youtube?
There is probably an option I am missing, but jsLint fails big time for me. See it is too hung up on my coding style. I use a lot of whitespace, Aftering every open parenthesis I put a space, before the closing parenthesis I put a space. I also use 2 spaces for indentation. But every line is pretty much “Problem at line * character *: Unexpected space after ‘(‘.” Stupid….stupid. Whitespace there does not matter!
Uncheck “Strict White Space”; it’s the second option down in the first column.
I use JSLint for all my projects, it is an awesome tool :)
Hey guys,
is it possible to check a jquery-script with JSLint? He tells me the whole time, that $ is not defined and when i set the short-version of the dom-ready he says “Missing space after ‘function’.”
And another question / statement:
Before watching this tutoriaI, i have never heard from the combined version of creating vars in this way (and for me this looks very strange :)). i am saying “var blah = {}, newvariable = “test”;” This looks like i am creating multiple contents for the blah-var and not to set more variables and the first one is called blah, do you know what i mean? :) It is not the coolest way to read a code and understand, which variables are defined. is this pratice faster then the common workflow (var blah = {}; var newvariable = “test”;)?
Oh and the “use strict”-Header for js-File. Really nice – Does someone of you use this?
Thanks for every response and sorry for my poor english,
regards Blaku
For jQuery (and any script that’s outside the script you’re running through JSLint), you can add a globals comment to the top of your script:
// this should cover you for jQuery
/*globals $ */
// for another hypothetical script outside this one
/*globals superLib, other, mooTools, etcetera */
As far as I know, there’s no speed benefit to grouping your variables together with one var statement; it’s just a best practice, mainly because JavaScript doesn’t have block scope: it only has function scope. If you declare all your variables at the top of a function, you won’t get confused about their scope. And, since they’re all together, you might as well save yourself some typing and use only one var statement.
I don’t currently put in “use strict”, because no browser (that I’m aware of) implements it.
For checking jQuery scripts you can try too jQuery Lint : http://james.padolsey.com/javascript/jquery-lint/ (never tried by myself, but still can be useful).
Put each new variable on a new line to increase readability. =)
I agree, I wouldn’t consider it a best practice. The book Clean Code actually recommends against stuff like this. You should be as explicit as possible
cool, you guys know a good IDE whitch have a nice debug feature on JS ?
For an IDE with JS debugging, I’ve been using Eclipse. I use Dreamweaver as well, but it doesn’t catch things like trailing commas (which crash IE but not FF). Eclipse does.
I can recommend Aptana Web (http://www.aptana.org/). It has Javascript debugging, validation and jsdoc support and you can add libraries like jquery, yui or mootools. It has also full code completion for js, php, css, html as well as for every activated library.
I’ve heard about JSLint so many times, but never really had a good reason to try it. Your quick tip inspired me to drop my new plugin (http://jacobdubail.com/journal/crazy-dots-jquery-plugin) in to see how bad it was… I never realized that JS was so picky about spaces and tabs, but I had surprisingly few errors. Good news for me. I’ll definitely be using this tool more in the future. Thanks for the tip.
Nice tip but I had to back up several times because even with the volume up all the way in the player and on my notebook I still could hardly hear it.
But keep bring tips like this. I enjoy quick tips as much as I do the full tuts.
That is a great tool to implement JS into websites.
Good stuff Andrew! I’d like to see more of these QuickTip videos!
Oh, and Python please.
thanks for showing how to use jsLint.
I just started learning javascript and had heard of it, but didn’t really know how to use it.
very useful!
Thanks for the great tip.
Great share, great article, very usefull for me. Your thought of article is very much creative and interesting to read.
really very usefull
i use it almost every day… it really helps a lot