[jslint][javascript]Code quality check using jslint with command

Contents

Overview

I think Javascript is difficult for operation.
If you use jslint which is code quality check tool,
you can decrease operation cost(a little bit) of Javascript I think. Here I’ll use this.

Environment

OS
- Linux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
nvm
- v0.10.26

Install

Install nvm
npm install jslint

Easy!

How to use

I’ll try to use jslint to the code which get information from
Hatena Bookmark Entry API.

1.hatena.html

&amp;amp;lt;!DOCTYPE html&amp;amp;gt;
&amp;amp;lt;html&amp;amp;gt;
  &amp;amp;lt;head&amp;amp;gt;
    &amp;amp;lt;title&amp;amp;gt;jslint test&amp;amp;lt;/title&amp;amp;gt;
  &amp;amp;lt;/head&amp;amp;gt;
  &amp;amp;lt;body&amp;amp;gt;
    &amp;amp;lt;button id="button1" type="button"&amp;amp;gt;Push&amp;amp;lt;/button&amp;amp;gt;
    &amp;amp;lt;div id="msg"&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;

    &amp;amp;lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
    &amp;amp;lt;script type="text/javascript" src="hatena.js"&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
  &amp;amp;lt;/body&amp;amp;gt;
&amp;amp;lt;/html&amp;amp;gt;

2. hatena.js

/*
 * hatena.js
 */

/*jslint        browser : true, continue : true,
  devel  : true, indent : 2,      maxerr : 50,
  newcap : true, nomen  : true, plusplus : true,
  regexp : true, sloppy : true,     vars : false,
  white  : true
*/
/*global $ :true */

$("#button1").click(function(){
  $.ajax({
    url: "http://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fwww.hatena.ne.jp%2F",
    type: "GET",
    dataType: "jsonp",
    jsonp: "callback",
    timeout: 1000,
    cache: false,
    success: function(data){
      $("#msg").html("");
      $("#msg").append(data.title + "&amp;amp;lt;br/&amp;amp;gt;");
      $("#msg").append(data.entry_url);
    },
    error: function(){
      $("#msg").html("ERROR");
    }
  });
});

/jslint … */ and /global … */ is jslint setting.
Of course, you can do setting jslint with command line option and setting file.
(Please check here)
But, this setting is often different from other js file.
So I wrote setting for js file.

3. Execute

$ ./node_modules/.bin/jslint hatena.js

hatena.js is OK.

Good! Next is error case.

/*
 * hatena.js
 */

/*jslint        browser : true, continue : true,
  devel  : true, indent : 2,      maxerr : 50,
  newcap : true, nomen  : true, plusplus : true,
  regexp : true, sloppy : true,     vars : false,
  white  : true
*/

$("#button1").click(function(){
  $.ajax({
    url: "http://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fwww.hatena.ne.jp%2F",
    type: "GET",
    dataType: "jsonp",
    jsonp: 'callback',
    timeout: 1000,
    cache: false,
    success: function(data, status){
      $("#msg").html("");
      $("#msg").append(data.title + "&amp;amp;lt;br/&amp;amp;gt;");
      $("#msg").append(data.entry_url);
    },
    error: function(){
      $("#msg").html("ERROR");
    }
  });
});

I deleted declaration of global variable and add unused argument “status” at success part.

hidetomo@www4322gi:~/work/jslint$ ./node_modules/.bin/jslint hatena.js

hatena.js
 #1 '$' was used before it was defined.
    $("#button1").click(function(){ // Line 12, Pos 1
 #2 '$' was used before it was defined.
    $.ajax({ // Line 13, Pos 3
 #3 '$' was used before it was defined.
    $("#msg").html(""); // Line 21, Pos 7
 #4 '$' was used before it was defined.
    $("#msg").append(data.title + "&amp;amp;lt;br/&amp;amp;gt;"); // Line 22, Pos 7
 #5 '$' was used before it was defined.
    $("#msg").append(data.entry_url); // Line 23, Pos 7
 #6 Unused 'status'.
    success: function(data, status){ // Line 20, Pos 29
 #7 '$' was used before it was defined.
    $("#msg").html("ERROR"); // Line 26, Pos 7

Error output is like this.

Conclusion and other information

You can decrease operation cost of Javascript a little bit with jslint.
Of course, you can use jslint with grunt using this.
(you can find other code quality check tool here)

zuqqhi2