Carter Bailey Tech Thoughts, lessons learned, and motivation

13Oct/120

Using JSLint: A Couple Suggestions and Reminders

Recently, we've been redesigning an ASP.net and VB.Net web app at work to fully utilize a Client-Side architecture instead of the usual Server-Side ASP page life cycle that comes baked into similar web apps. We've moved away from the server "owning" the data to the client's browser "owning" the data (using the JSON format), processing adjustments to that data, and making the requests to web services that handle any analyzing of the data. All that to say that I've been working heavily in Javascript, jQuery, AJAX, and various plugins that go along with those. Free, online tools like JSLint and JSONLint are invaluable tools for the client-side developer.

The following are some suggestions and reminders for situations that I've come across for using JSLint the most effectively.

Always use strict.

By that, I mean

"use strict";

This is becoming more relevant as HTML5 becomes adopted and prevalent on websites and browser start becoming HTML5-compliant. Here is a great article by John Resig regarding the use of "use strict;" which will explain the reasons much better than I can: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ .

Include the following header to all of your JavaScript files

1
2
/*jslint browser: true*/
/*globals $, jQuery*/

JSLint is primarily concerned with the quality and formatting of your code, not the correctness. This means that global declarations of variables or functions made in external files will show as errors in JSLint even when a browser would handle the situation gracefully. I prefer using the word "globals" since we will be using several items in this comment header.

Also note that there should be no spaces before the word "globals" and you cannot make that comment block a multi-line block. If you want to break up the globals on separate lines, follow this format.

1
2
3
/*jslint browser: true*/
/*globals $, jQuery*/
/*globals functionX, functionY, variableA, variableB*/

Start Declaring Your Variable at the Beginning of Each Function

JSLint doesn't like wastefulness, and if you have a habit of writing variable declarations like:

1
2
3
4
5
6
7
8
9
10
11
function call() {
   var x = '210';
   var y = '555';
   var z = '5555';
 
   // do some coding
 
   var telephone = '(' + x + ') ' + y + '-' + z;
 
   make_a_call(telephone);
}

You will probably be scratching your head at first when JSLint complains about your variable declarations. Best practice is to declare them all at the beginning explicitly, even though the browser will bubble the declarations up to the highest scope when it sees a variable declaration. JSLint would prefer to see this sort of setup:

1
2
3
4
5
6
7
8
9
10
11
12
13
function call() {
   var x, y, z, telephone;
 
   x = '210';
   y = '555';
   z = '5555';
 
   // do some coding
 
   telephone = '(' + x + ') ' + y + '-' + z;
 
   make_a_call(telephone);
}

And really, this makes it easier for anyone who has to read through your code (including yourself!) because they can see at the top of each function the relevant variables that have a local level scope.

Always Use Brackets With "If-Else" Statements

Yes, we've all taken advantage of the fact that Javascript doesn't mind if you put an entire If statement on one line to save space and the hammering of you Return key, but it can lead to readability issues as well as other mistakes when other programmers have to go through your code.

Instead of this:

1
2
if (this_is_true) return this_value;
else return another_value;

Use this:

1
2
if (this_is_true) { return this_value; }
else { return another_value; }

or even this:

1
2
3
4
5
if (this_is_true) { 
   return this_value;
} else {
   return another_value;
}

Note all of the spaces in each example. In the last example, you should put the "else" one space after the closing bracket of the "if." JSLint gets picky about the placement of brackets, "if"s and "else"s as much as everything else.

I hope this was a little help to anyone out there. Leave your favorite tips, suggestions, or reminders in the comments or tweet me at @carterbailey. If you spot an error, let me know of that too! I hate being wrong, and I would like to correct any mistakes as soon as possible!

Thanks for stopping by,

Carter Bailey

Posted by Carter Bailey

Comments (0) Trackbacks (0)

No comments yet.


Leave a Reply

No trackbacks yet.