How to write Error Proof JavaScript using Linter Tools
We all think that we are very good at JavaScript, Some people think that they are one of the best in writing JavaScript. But still their code is error prone and not good looking, Doesn't work in all browsers.
To solve that we need JavaScript Linter Tools.
Now Lets Talk about what is JavaScript Linter Tools.What is JavaScript Linter tool ?
Linter tool checks your code to have a Quality and Maintainable code.
Check all your JavaScript source code for common mistakes without actually running the script or opening the web page
Examples:
Missing semicolons at the end of a line.
Curly braces without an if, for, while, etc.
Code that is never run because of a return, throw, continue, or break.
Case statements in a switch that do not have a break statement.
Statements that don't do anything.Different type of available linter tools
There are many but the most widely used are following
JSLINT
JSHINT
Let's Talk about JSLINT by Douglas Crockford
Website: http://jslint.com/
Github: https://github.com/douglascrockford/JSLint
Many tools available to integrate with JSLINT
Visual Studio Plugin: 2010 http://visualstudiogallery.msdn.microsoft.com/961e6734-cd3a-4afb-a121-4541742b912e
Visual Studio Plugin: 2012 http://visualstudiogallery.msdn.microsoft.com/1a417c37-4d6f-43ca-b753-6ea6eb5041fd
Notepad ++ Plugin : http://sourceforge.net/projects/jslintnpp/
*** No need to solve all the warning this Tool givesJSHINT By Anton Kovalyov and Paul Irish
Website: http://jshint.com/
Github: https://github.com/jshint/jshint/
Visual Studio Plugin: 2010 http://visualstudiogallery.msdn.microsoft.com/961e6734-cd3a-4afb-a121-4541742b912e
Visual Studio Plugin: 2012 http://visualstudiogallery.msdn.microsoft.com/1a417c37-4d6f-43ca-b753-6ea6eb5041fd
*** This Tool gives limited warning and Error Message which are more meaningfulWhich one is Better?
After reading some articles about JSLINT and JSHINT
I conclude the following:
JSLINT is the most widely used
It's the Parent Branch and includes a very strict rules
Although when we talk about JSHINT it's a Fork out of JSLINT and it was developed to loosen the strictness of JSLINT and is more configurable in terms of what shall we allow and what shall we not.
So it depends on how strict we want to make our standards.
Because sometimes a developer might right a foolproof code which might get failed in JSLINT as its not up to its standard.Example:
A) Passes JSHint out of the box - fails JSLint
(function() {
"use strict";
var x=0, y=2;
function add(val1, val2){
return val1 + val2;
}
var z;
for (var i=0; i<2; i++){
z = add(y, x+i);
}
})();
B) Passes Both JSHint and JSLint
(function () {
"use strict";
var x = 0, y = 2, i, z;
function add(val1, val2) {
return val1 + val2;
}
for (i = 0; i < 2; i += 1) {
z = add(y, x + i);
}
}());VISUAL STUDIO PLUGIN SCREEN SHOTS:
JSLINT OPTIONS
JSHINT OPTIONS
A Quick Summary
After using these tools you can just make your code readable and error free.