Category Archives: JavaScript

Write better JavaScript code using JSLint

For those of you that may not be familiar with lint, lint is a programmatic process that seeks out common programming mistakes.   Lint was originally written decades ago for C code.  JSLint and other tools like it were developed to do the same for your JavaScript code.  JavaScript is an extremely intricate language that allows you to write really bad code.  These JavaScript linters will highlight hundreds of common JavaScript programming errors.   

If you are developing an application that uses JavaScript, you should have a linting tool in your development toolbox.  Below, I’ve evaluated a few.

Option 1: Use Web Essentials

At a minimum, you should install Web Essentials.

Then you get a JavaScript linter for free.  http://vswebessentials.com/features/javascript

You also now have cool menu options under Web Essentials to edit your ‘*int’ configurations (JSHint, TSLint, CoffeLint, and JSCS).

You’ll need to play with them, because out of the box, Web Essentials only finds the most grievous errors. 

Your JavaScript errors will show automatically in the Messages tab of the Error List:

clip_image002

Option 2 – JSLint.Net Add in

The best integration with Visual Studio and Web projects seems to be with The JSLint.Net add in

Once installed, you get new context-sensitive menu options by right-clicking a project or .js file. 

Project settings are integrated with the web project via a JSLintNet.json file, so they can be checked in and shared with other developers.

In the example below, I right-clicked on my web project and selected

1) Changed the ‘Output Errors As’ setting to Messages so that lint errors go to the Messages tab in the Error List window.

2) Checked ‘Run on save’ and ‘Run on build’

3) Previously ignored a bunch of .js files that I didn’t write.

clip_image004

On the JSLint Options screen, added a few Predefined Globals.

As we refer to them all too frequently in our code, I don’t want to see errors on these objects.

clip_image006

Option 3 – JSLint add-in for Visual Studio

If you want to take it a step further, you can install the JSLint add in for Visual Studio.  It has A LOT of functionality that you can play with, but is a little harder to configure.   Be sure to set the linter to JSHint, which is a little bit less restrictive than JSLint.

clip_image008