Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does it make any sense to use JSLint and follow it? [closed]

Lately I've been writing some JS code using jQuery and JavaScript as it is and I thought I will give JSLint a try. Let me say that the code contains various functions and jQuery usages and it works fine (without any errors ) in IE8 and latest Firefox. The code also validatas as XHTML 1.0 Transitional (and Strict too but I mostly want it to be Transitional valid).

However, with JSLint it's like everything is wrong. While I have read about it being very strict, even if I turn on only "The Good Parts" it's still like 70+ errors in a typical HTML page.

It starts out with this (why in the world would I want to remove the type to make my documents XHTML invalid??)

Problem at line 5 character 67: type is unnecessary.

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

and goes on with esoteric errors like

Problem at line 41 character 41: Use the array literal notation [].

var rows = new Array();

Problem at line 42 character 30: Too many var statements.

for (var i = 0; i < data.length; i++) {

Problem at line 42 character 55: Unexpected use of '++'.

for (var i = 0; i < data.length; i++) {

Problem at line 64 character 50: ['PrettyId'] is better written in dot notation.

var item = $("#item_" + data["PrettyId"]);

If anyone can provide me answers to these errors and especially, how to make JSLint be aware of jQuery and understand it, I will appreciate it.

If not, please explain whether you use it or not and whether you advice to use it or not.

UPDATE:

I'm going to wait one more day for more answers, if any, then I'll accept the answer with the most upvotes.

like image 736
mare Avatar asked Sep 19 '10 14:09

mare


People also ask

What is JSLint used for?

JSLint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. It is provided primarily as a browser-based web application accessible through the domain jslint.com, but there are also command-line adaptations.

What is JSLint and ESLint?

ESLint: The fully pluggable JavaScript code quality tool. A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease; JSLint: A Code Quality Tool for Javascript.


2 Answers

A thing to remember when using JSLint is that is built on the opinion about what one person thinks is the "Good Parts".

I think is a great tool but there are rules that I don't agree with.

About the type attribute, you can find more about the opinion of the author here he says that the attribute is "required and non necessary", but if you validate your documents you clearly need it.

With the use of the Array literal notation [] vs. the Array constructor, I agree, there are differences that can make the two syntaxes behave different, for example:

 [5]; // one-element array
 ["5"]; // one-element array

 new Array(5); // empty array but its length is initialized with 5
 new Array("5"); // one-element array

So, for consistency an brevity the literal notation is better.

About the "Too many var statements", JavaScript has no block-scope, the scope is at function or global level, and all var statements are evaluated before the code execution -aka hoisting- and they are initialized with undefined, while the assignments are made at runtime.

For example:

var x = 0;
if (true) {
  var x = 1; // useless var, x already declared
}
x; // 1

And the "hoisting" of variable declaration can be shown in this example:

var x = 5;  // global
(function () {
  alert(x); // alerts `undefined`, x declared but unassigned in this scope
  alert(y); // ReferenceError, y is undeclared

  var x = 10;
})();

As you can see x holds undefined because it is declared before the actual code execution, the var statements are hoisted to the top of their enclosing scope:

var x = 5;  // global
(function () {
  var x;
  alert(x); // alerts `undefined`, x declared but unassigned
  alert(y); // ReferenceError, y is undeclared

  x = 10; // assignment is made
})();

So that rule wants to actually make the code to resemble what will happen, all the var statements at first place.

About the "Unexpected use of '++'", this is another rule that I don't quite like, the author thinks that "those contribute to bad code by encouraging excessive trickiness".

When I use them in some expression, I try to extract the operator usage to an alone statement, for example:

array[++id] = x;

To:

id+=1;
array[id] = x;

Which is more clearer, but anyway in the case of a for statement IMO it can't cause any confusion at all...

About the last one "['PrettyId'] is better written in dot notation.", JSLint expects the usage of the bracket notation to be "dynamic", it expects to see an expression there, not a String literal that contains a valid identifier name, the bracket notation should be used only when you want to access a property with a name that clashes with a reserved word e.g.:

data.function;    // SyntaxError in ECMAScript 3 based implementations
data["function"]; // Ok

Or when a property contains characters that are not a valid identifier, e.g.:

data.foo-bar;    // it access the property `foo` minus a `bar` variable
data["foo-bar"]; // Ok

data.foo bar;    // SyntaxError, unexpected `bar` identifier
data["foo bar"]; // Ok
like image 144
Christian C. Salvadó Avatar answered Sep 29 '22 06:09

Christian C. Salvadó


I use jslint on .js files and find a combination of options and fixes to make it happy. I find it improves my code quality. I would recommend running it, even if you only use it to isolate omitted 'var' declarations.

I avoid the script tag warning by not running against html files. I use jslint systematically on .js files, but not on html. I find it is just too burdensome to declare all the global identifiers that got defined in included scripts, but aren't visible to jslint.

Crockford's book 'Javascript: The Good Parts' explains many if not all of the jslint warnings, and some of them are based on perceived bug proneness. The 'new Array()' vs ' []' warning is based on Doug's aversion to the 'new' operator. Omitting 'new' for various constructors is commonly valid code, but not correct code, and using the alternative syntax avoids that risk.

The 'too many vars' error means just that, a large number of 'var' declarations in a given function: the Crockford endorsed style is to use one or very few 'var' declarations, all at the top of the function. You can declare multiple variables in one var statement, by separating them with commas.

The '++' caution is another bug proneness based warning; Using '+=1' means the same thing, and Doug believes it to be less error prone.

jslint is thus a mixed bag. Some features (locals vs globals) are invaluable, some (script types) are just annoying, and many are of dubious benefit but harmless.

jQuery itself passes jslint checks, as described here: http://docs.jquery.com/JQuery_Core_Style_Guidelines#JSLint

like image 24
Rdbhost Avatar answered Sep 29 '22 06:09

Rdbhost