JSHint入門 - JSHintを使ってJSコードの信頼性を高める

2016年2月現在、JSHintよりESLintの利用を奨励します。

----

**全て** の JavaScript ファイルは JSHint ないしその他のソース解析ツールで管理されるべきだと思っている。
今回は JSHint の基本的な使い方を説明する。

##インストール

JSHint は Node.js で実装されているのでまずはそれをインストールする。Mac なら `brew install node` でサクッとインストール可能。また、インストールには npm を使うのでそれもいれる。そして npm をつかって JSHint をインストールする。 `-g` オプションはシステムにインストールするという意味。インストールディレクトリを PATH に追加するのを忘れない（デフォルトで追加されたかどうか記憶が曖昧）。

```sh
% brew install node
% curl https://npmjs.org/install.sh | sh  # npm のインストール
% npm install -g jshint
```

##.jshintrcと.jshintignoreをプロジェクトルートに設置する

`.jshintrc` は `jshint` の設定を書く。`jshint` は個々のファイル単位や、関数単位での設定もできる。その方法は後述する。詳しいオプションの説明は [JSHint -Documentation](http://www.jshint.com/docs/) 参照。 **Relaxing Options** はデフォルトで禁止されているものを許可する項目なので、注意して使うようにする。

ここでは自分の設定を紹介する。ちなみに JSON 形式。

```js:.jshintrc
{
  "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](https://github.com/jshint/jshint/blob/master/src/shared/vars.js) を読めば分かる。ちなみに `dojo` を入れているのは `require.js` を使っていて `define` と `require` を許可したかったため。
`globals` で任意のグローバル変数を追加できる。個々の `globals` が何故 `false` なのかは後述。

`.jshintignore` は名前から分かるように `jshint` コマンドで無視するファイルと記述する。ファイル名ではなく、ここではプロジェクトルートからの相対パスで記述する。現時点でグロブは使えない。プロジェクトで使うライブラリなどを指定する。

```
js/require-jquery.js
tests/vendor/qunit.js
```

##実行してみる

実行する時はプロジェクトルートで実行する。

```sh
% jshint js/**/*.js tests/**/*.js
```

この時 `.jshintignore` で指定されたファイルは無視される。

##ファイルローカル、関数ローカルな設定をする

どうしても全体より条件を緩くしたいファイルや関数は出てくる。逆に厳しくしたい時もあるかも知れないが、基本的には全体としては厳しく、必要に応じて緩和するようにした方がよい。それはさておき、このようなときは先頭に次のようなコードを入れる。 `/*` と `jshint` の間は **くっつけて書く** 。スペースが入ると単なるコメントとして扱われてしまうので注意。

```js
/*jshint strict: false */
```

これがファイルの先頭にあれば、そのファイルでは `use strict` の使用は強制されない。関数の先頭ならその関数で `use strict` を使わなくてよい。ちなみにこれをファイルの先頭においたとしてもグローバルに `use strict` するには `globalstrict: true`が別途必要である（グローバルで使うとサードパーティのライブラリが動かなくなる可能性が高いのでおすすめしない）。

グローバル変数へのアクセスの管理には `/*global */` を使う。`.jshintrc` で `"jquery": true` とするのは、全てのファイルの先頭で次のように宣言するのと等しい。

```js
/*global jQuery: false $: false */
```

ここで `false` の意味は、ローカルで `jQuery` と `$` を **上書きできない** という意味。 `true` で上書きできるようになるが、基本的に `false` 以外設定するべきではない。

##Vim使いはsyntasticをインストールしカレントディレクトリをプロジェクトルートにする

[scrooloose/syntastic - GitHub](https://github.com/scrooloose/syntastic) をインストールする。デフォルトで JavaScript の保存時に jshint がインストールされていれば実行してくれるようになる。この時カレントディレクトリにある `.jshintrc` はちゃんと考慮してくれるので（より正確に言えば設定ファイルを指定する `--config` オプションを使わずに `jshint` コマンドを起動してくれるのでデフォルトの動作であるカレントディレクトリの `.jshintrc` がそのまま使われる。）vim を起動する時は必ずプロジェクトルートで起動するようにする。そうすれば極論としては手で jshint コマンドを一度も叩く必要はない。

もし全ての JS ファイルで同じ `.jshintrc` を使いたいなら `g:syntastic_javascript_jshint_conf` で指定する。その場合、カレントディレクトリの `.jshintrc` が使われ無くなってしまうので [thinca/vim-localrc - GitHub](https://github.com/thinca/vim-localrc) とか使って設定を上書きする必要がある。