Vim + Syntastic + JSHint

Vim で JSHint を使えるようにする話。 Vim でコードのチェックをするのにどのプラグインを使うかで、評判のよい Syntastic を使うことにした。GitHub で公開されてて、 Vim への追加も簡単。

1. JSHint をインストール

まずコマンドラインから JSHint を使えるようにする。

$ npm install jshint -g

Stackoverflow の以下の投稿で、 JSHint を vim で使うための方法が書かれてる。 javascript - VIM + JSLint? - Stack Overflow, Community-driven jshint.com (better than JSLint) ここでは .jshintrc というファイルを $HOME に置くようにと言ってる。そしてそのサンプルが紹介されてる。ただしこのサンプル、プロパティ "predef" 内に余分なカンマ (,) があり（22行目）、このままだと Syntastic を使うときに正しく文法チェックをしてくれないので、カンマは消した上で保存した。

早速 JSHint を使ってみる。試しに何か文法エラーを含む JavaScript ファイルを作ってそれをチェックする。

$ jshint js-with-errors.js

ソースコードの問題点がターミナルに列挙されていればok。

2. Syntastic を Vim に追加

自分は Vim でのパッケージ管理に NeoBundle を使ってる。なので、.vimrc に次のように書き込み Syntastic を追加する。

NeoBundle 'scrooloose/syntastic'

.vimrc を保存し、 vim を再起動。

:NeoBundleInstall

で Syntastic のインストールが完了。

3. Syntastic の設定

Syntastic は JavaScirpt 以外にも色々な言語のソースをチェックすることができる。以下では JavaScript のチェックだけ自動で行われるようにしてる。また、 JavaScript のソースチェックに JSHint を使いたいので、 syntastic_javascript_checker には 'jshint' を設定（参照: .vim/bundle/syntastic/syntax_checkers/javascript.vim）。

" =========
" syntastic
:let g:syntastic_mode_map = { 'mode': 'active',
                           \ 'active_filetypes': ['javascript'],
                           \ 'passive_filetypes': [] }
:let g:syntastic_javascript_checker = 'jshint'

これで vim で JavaScript のコードをチェックできるようになる。 vim を再起動してから JavaScript のファイルを開いてみる。ファイルを保存するとSyntastic （と JSHint）によってコードがチェックされ、問題があれば警告が出る。保存時でないときに手動でチェックさせたければ次のコマンドを入力する。

:SyntasticCheck

エラーが出た場合は次のコマンドを入力し、詳細を確認。

:Errors

その他、詳しい使い方はヘルプを確認してみて下さい。

:h syntastic