Production Level Knowledge & Tips. Updated at every month 1st Monday 7:00 AM JST.

  1. プログラミング
  2. 41 view

[jslint][javascript]jslintをコマンドから使ってコード品質チェック

概要

Javascriptは利用方法によるけど運用が難しい言語だと思ってる。
jslintを使用するとコードの品質(?)をチェックすることが出来る。
開発時にjslintが通るコードを書くようにすると、経験上いくらか運用がマシになる気がする。
web上でも使えるけど、コマンドから使えるとJenkinsとか何かと便利なのでコマンドから使う方法をメモ。
ここではこれを使う。

環境

  • 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

インストール

  1. nvmのインストール
  2. npm install jslint
これだけ。

使い方

ここでは
はてなブックマークエントリー情報取得API
叩いて結果を適当に画面に表示するjsのコード品質をjslintでチェックしてみる。

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用の設定。
ここを見れば、
コマンドラインオプションでとか設定ファイルでjslint設定を書くことができるけど
設定はファイルごとに異なるのが普通だと思うので直接書いた。

3. 実行

まず、この状態でhatena.jsを叩いてみる。
$ ./node_modules/.bin/jslint hatena.js

hatena.js is OK.

通った! じゃあ、駄目な場合で叩いてみる。
/*
 * 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");
    }
  });
});

$はグローバル変数ですというjslintに対する宣言を消して、
successのところに使用していないstatusを引数に入れた。
すると、
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

こんな感じ。

まとめと参考

jslintでコマンドからjsのコード品質をチェックすることが出来る。
これを使うとgruntでjslintが使える。
jsHintというjslintと似たものもある。

プログラミングの最近記事

  1. How to bring columns not GROUP BY key from ne…

  2. HiveでGROUP BYを伴うサブクエリのネストからGROUP BYのキー以外のカラムを…

  3. How to drop Hive’s External Table

  4. HiveでExternal Tableを削除する方法メモ

  5. [触ってみた]Microsoft Quantum Development Kit

関連記事

PAGE TOP