Monday, November 25, 2013

Using JSHint with Underscore.js in Visual Studio 2012 [Field Notes]

Since my new gig has me diving into Javascript quite a bit, I've really been loving JSHint integration (brought to us lovingly by Mads Kristensen and the team building the Web Essentials 2012 add-on).

Firstly: The Cool Feature that Caused my Issue -- Global Variables

One of my favorite features of JSHint is that it will tell you when you're using a variable that hasn't been defined yet. This does wonders for reducing scoping issues, etc.

But, when referencing browser functionality or variables from other files (think console.log, ko, moment, toastr, etc.) it would see them as undefined:

Yiiiikes.
Luckily, this can be fixed for most issues by utilizing the "global" command in a comment. JSLint will interpret the following as "assume all of these variables are defined":


This saves so many validation headaches.

The Problem: Identifying UnderscoreJS as a Global Variable

However, when I add the Underscore.js global identifier ("_", unsurprisingly) to the global list, I get a different error -- "Unexpected dangling '_' in '_'":

Why can't I just let it dangle?
The Solution: the "nomen" Option

One line of code removed this error:
/*jslint nomen: true */
According to the JSLint options documentation, this allows underscores to begin a name. In the case of underscore, the '_' definition is both the beginning and end of the name (similar to jQuery's "$").

Cautions & Some Tiny Pitfalls

Had a few minor "oops" moments while figuring this out.

Ensure that the nomen option is set before your Globals are Defined

This won't work:

/*global $, jQuery, ko, moment, console, toastr, accounting, _ */
/*jslint nomen: true */

But this will:

/*jslint nomen: true */
/*global $, jQuery, ko, moment, console, toastr, accounting, _ */

JSHint says "nomen" will be deprecated. 

I kind of hope that's not the case, since it helps here.

There has been some back and forth on the JSHint Github about this, but the JSHint options page for "nomen" makes it pretty clear:

This option disallows the use of dangling _ in variables. We don't know why would you need it.

If you were a little new to this, as I was, I hope this helps! Feel free to send some feedback in the comments.

References

No comments:

Post a Comment

Keep it classy, folks.