How to Find jQuery Errors in JS File ?

What is JSHint ?

• It's a Tool to detect errors and potential problems in JavaScript code
• Can be used to enforce coding conventions
• Simple Tool that can very often spot your mistakes before you do
• It can save you from a lot of tedious debugging
• Lets you re-factor JavaScript code with greater confidence
• It's reduces the chances of you deploying broken code to your production server

What does JSHint  do ?

• It identifies definite, objective errors in your code
• Such as mistyped keywords, mistyped variable names, mismatched parentheses, and other syntactical slip-ups
• It enforces some basic code style consistency rules
• Such as No trailing white space, no use of the == operator, etc.
• Depending on how you configure JSHint  

How to Integrate JSHint with Visual Studio 2010 ?

Step 1. Open Visual Studio 2010

Step 2. Click  Tools  ===> Extension Manager

Step 3. Click "Online Gallery" Button

Step 4. Type "jslint" inside the Search box

Step 5. Click "Download" Button

Step 6. Click "Install" Button

Step 7. Click "Restart Now" Button for Restart Visual Studio 2010

That's It.You're Done.

How to Configure JSHint  ?

Step 1. Click  Tools  ===> JS Lint Options... on Visual Studio 2010 menu

Step 2. Click  "Visual Studio Options" and do necessary environmental adjustments
            are as below

Step 3. Click "JSLint Options" and Then select "JSHint" is as below

How to Configure Global Variables of jQuery and Knockout ?

Step : Click  "JSLint Options" and Then Type $ for jQuery and ko for Knockout inside the
           "Predefined Vars" Text box with separator as Comma (,)

That's It.You can Configure JSHint environment as you wish.


Let's do Small Demonstration

JsHintTest.js


function averageWeight(weights) {

  var sum = 0, index;

  for (index = 0; index < weights.length; index += 1) {

       sum += weights[index];

  }

   return sum / weights.length;

}

var myAverageWeight = averageWeight([1.75, 1.78, 1.82]);

Then Click View ==> Error List on Visual Studio 2010 Menu

After that, change the above function's Name as average and Parameter as values

JsHintTest.js file with Changes (with Errors)

function average(values) { // <-- This is the only line has been changed

    var sum = 0, index;

    for (index = 0; index < weights.length; index += 1) {

        sum += weights[index];

    }

    return sum / weights.length;

}

var myAverageWeight = averageWeight([1.75, 1.78, 1.82]);

• Then try to Save (Ctrl+S) the JsHintTest.js file
• After that It will show all the Errors are as below

You can see all the mistakes which you did by using JSHint very easily.

Would You Like to Test Your JS Code Online ?

JSHint Live

Do You Need to Know More about JSHint ?

JSHint Documentation

JSHint Blog

Conclusion

• JSHint is best when you’re writing fresh new code
• It needs a bit of configuration to give the best results
• JSHint is reliable and sophisticated Tool for find errors on JavaScript code files
• You could use JSHint for enforces some basic code style consistency rules 

I hope this helps to You.Comments and feedback greatly appreciated.

If you feel it was a good article,Give me a +1.Thank You.

Happy Coding.

Tools You Might Also Like

How to Use Asp.Net MVC Routing Debugger Visualizer ?

How to Check Spelling in Visual Studio 2010 ?

How to Use Git with Visual Studio 2010 ?