概要
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
インストール
- nvmのインストール
- 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と似たものもある。