プログラミング + アカデミック + 何か面白いこと

  1. Programming
  2. 140 view

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

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

  1. Install nvm
  2. 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

<!DOCTYPE html>
<html>
  <head>
    <title>jslint test</title>
  </head>
  <body>
    <button id="button1" type="button">Push</button>
    <div id="msg"></div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="hatena.js"></script>
  </body>
</html>

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 + "<br/>");
      $("#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 + "<br/>");
      $("#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 + "<br/>"); // 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)

Programming recent post

  1. Install sbt 1.0.0 and run sample template

  2. [Machine Learning]Created docker image includ…

  3. [Node.js]How to write batch script with Node.…

  4. [Play][Scala]Develop Request Driven Batch Usi…

  5. [OpenCV][Ruby]Auto check web page design corr…

関連記事

PAGE TOP