2013年6月1日土曜日

JavaScript をコマンドラインで品質チェック( JSHint )

JavaScript の品質チェックツールである JSLint をコマンドラインから使えるようにしようと重い重い腰を上げました。

やり方を調べていると、"JSHint" なるものがあることを知った。
JSHint は『JSLint を元に、「より柔軟な設定ができる JSLint 」として』開発されたそうです。(JavaScript テクニックバイブルより)
確かに、JSLint はちょっと厳しすぎるように思う(JSLint の作者も言っているように)。
それに引き換え "Hint" とは、いかにも優しそうな感じする。
これはいい考えだ。



インストール


1) Node.js のインストール

JSHint は Node.js のプログラムとしてインストールできるのでまずは、Node.js をインストールします。 Mac の場合は Node.js の公式 HP からインストーラをダウンロードしてインストールします。


2) JSHint のインストール

Node.js をインストールした後で、Node.js のパッケージ管理システムを使って JSHint をインストールします。

$ sudo npm install -g jshint


JSHint を使ってみる

$ jshint test.js

実行してみると、あれっ? これだけ?
思った以上に警告が少なくてちょっと物足りない。



もうちょっと厳しく設定

JSLint と同様に JSHint でも警告の具合を調整出来ます。
設定ファイル .jshintrc に書きます。
.jshintrc はカレントワーキングディレクトリに置いてもいいし、ディレクトリツリーを上にたどっていった、どこに置いてもいいようです。
置き場所によって、プロジェクト毎の設定にもできるし、一括設定にもできる仕組みです。
とりあえず僕は home に置いておきました。

手始めに Enforcing Options の項目を全部 true に設定しました。(オプションは JSHint のページを参照)
jshint を実行。
大量に警告が出ました! これこれ!
あっ!

... line 12, col 17, Expected 'start' to have an indentation at 14 instead at 17.

そうそう、これこれ。
これが出ないと始まりません。やっと納得感。
インデントの位置がダメと言う警告で、"JSLint" で必ず見た警告です。

その後、ちょっと調節して下の様な設定になりました。
使いながらまた調節していきます。
JSHint は多分デフォルトで良い感じに警告をしてくれるんでしょうけど、結局、JSLint と同じような設定にしてました。

// file .jshintrc
{
        "bitwise": true,
        "camelcase": true,
        "curly": true,
        "eqeqeq": true,
        "es3": true,
        "forin": true,
        "immed": true,
        "indent": false,
        "latedef": true,
        "newcap": true,
        "noarg": true,
        "noempty": true,
        "nonew": true,
        "plusplus": false,
        "quotmark": false,
        "undef": true,
        "unused": true,
        "strict": true,
        "trailing": true,
        "maxparams": 3,
        "maxdepth": 3,
        "maxstatements": false,
        "maxcomplexity": 3,
        "maxlen": 80,
        "browser": true
}


参考: JS Hint (公式ページ)

JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技

リンク: JSLint で自分のコードをチェックしてみた



0 件のコメント:

コメントを投稿