2016年2月現在、JSHintよりESLintの利用を奨励します。
全て の JavaScript ファイルは JSHint ないしその他のソース解析ツールで管理されるべきだと思っている。
今回は JSHint の基本的な使い方を説明する。
インストール
JSHint は Node.js で実装されているのでまずはそれをインストールする。Mac なら brew install node でサクッとインストール可能。また、インストールには npm を使うのでそれもいれる。そして npm をつかって JSHint をインストールする。 -g オプションはシステムにインストールするという意味。インストールディレクトリを PATH に追加するのを忘れない（デフォルトで追加されたかどうか記憶が曖昧）。
% brew install node
% curl https://npmjs.org/install.sh | sh # npm のインストール
% npm install -g jshint
.jshintrcと.jshintignoreをプロジェクトルートに設置する
.jshintrc は jshint の設定を書く。jshint は個々のファイル単位や、関数単位での設定もできる。その方法は後述する。詳しいオプションの説明は JSHint -Documentation 参照。 Relaxing Options はデフォルトで禁止されているものを許可する項目なので、注意して使うようにする。
ここでは自分の設定を紹介する。ちなみに JSON 形式。
{
"strict" : true, // "use strict" を強制
"indent" : 2, // インデントの深さ
"maxlen" : 80, // 一行の最大長
"unused" : true, // 宣言したきり使っていない変数を検出
// グローバル変数へのアクセスの管理
"undef" : true, // グローバル変数へのアクセスを禁止
"browser" : true, // ブラウザ用のやつは許可
"dojo" : true, // dojo tool kit用のやつは許可
"devel" : true, // consoleやalertを許可
"debug" : true, // debugger を許可
"globals": {
"_": false,
"Backbone": false
},
// Relaxing Options - 危険性を認識した上で設定すること
"eqnull" : true, // == null を許可
"expr" : true // x || (x = 1); とかができるようにする
}
グローバル変数のへのアクセスの管理 に並んでいる browser dojo devel によって具体的に許可される項目は /src/shared/vars.js を読めば分かる。ちなみに dojo を入れているのは require.js を使っていて define と require を許可したかったため。
globals で任意のグローバル変数を追加できる。個々の globals が何故 false なのかは後述。
.jshintignore は名前から分かるように jshint コマンドで無視するファイルと記述する。ファイル名ではなく、ここではプロジェクトルートからの相対パスで記述する。現時点でグロブは使えない。プロジェクトで使うライブラリなどを指定する。
js/require-jquery.js
tests/vendor/qunit.js
実行してみる
実行する時はプロジェクトルートで実行する。
% jshint js/**/*.js tests/**/*.js
この時 .jshintignore で指定されたファイルは無視される。
ファイルローカル、関数ローカルな設定をする
どうしても全体より条件を緩くしたいファイルや関数は出てくる。逆に厳しくしたい時もあるかも知れないが、基本的には全体としては厳しく、必要に応じて緩和するようにした方がよい。それはさておき、このようなときは先頭に次のようなコードを入れる。 /* と jshint の間は くっつけて書く 。スペースが入ると単なるコメントとして扱われてしまうので注意。
/*jshint strict: false */
これがファイルの先頭にあれば、そのファイルでは use strict の使用は強制されない。関数の先頭ならその関数で use strict を使わなくてよい。ちなみにこれをファイルの先頭においたとしてもグローバルに use strict するには globalstrict: trueが別途必要である（グローバルで使うとサードパーティのライブラリが動かなくなる可能性が高いのでおすすめしない）。
グローバル変数へのアクセスの管理には /*global */ を使う。.jshintrc で "jquery": true とするのは、全てのファイルの先頭で次のように宣言するのと等しい。
/*global jQuery: false $: false */
ここで false の意味は、ローカルで jQuery と $ を 上書きできない という意味。 true で上書きできるようになるが、基本的に false 以外設定するべきではない。
Vim使いはsyntasticをインストールしカレントディレクトリをプロジェクトルートにする
scrooloose/syntastic - GitHub をインストールする。デフォルトで JavaScript の保存時に jshint がインストールされていれば実行してくれるようになる。この時カレントディレクトリにある .jshintrc はちゃんと考慮してくれるので（より正確に言えば設定ファイルを指定する --config オプションを使わずに jshint コマンドを起動してくれるのでデフォルトの動作であるカレントディレクトリの .jshintrc がそのまま使われる。）vim を起動する時は必ずプロジェクトルートで起動するようにする。そうすれば極論としては手で jshint コマンドを一度も叩く必要はない。
もし全ての JS ファイルで同じ .jshintrc を使いたいなら g:syntastic_javascript_jshint_conf で指定する。その場合、カレントディレクトリの .jshintrc が使われ無くなってしまうので thinca/vim-localrc - GitHub とか使って設定を上書きする必要がある。