VimでJavaScript開発環境を整える

Node.jsやjQueryなどJavaScriptを書く機会が増えてきそうなので、VimでのJavaScriptの開発環境を整備します。
基本的なVimの設定はこちらです。
今年こそ始める！何度も挫折した人のためのモダンVim再入門

• シンタックスハイライト(JavaScript-syntax)
• インデント(vim-javascript)
• 文法チェック(Google Closure Linter / gjslint)

シンタックスハイライト

JavaScript用のシンタックスハイライトを導入します。
以下のプラグインを利用します。
JavaScript syntax : Better JavaScrirpt syntax support

Vundleでプラグインをインストールするため、.vimrcに以下記述を追加してください。

.vimrc

 Bundle 'JavaScript-syntax'

編集後、:BundleInstallを実行してください。

インデント


Vimはデフォルト設定だとインデントなどがかなり残念なことになるので、JavaScript用のインデントを導入します。

以下のプラグインを利用します。
Better Javascript Indentation : Vastly improved javascript indentation


Vundleでプラグインをインストールするため、.vimrcに以下記述を追加してください。

.vimrc

 Bundle 'pangloss/vim-javascript'

編集後、:BundleInstallを実行してください。

文法チェック

GoogleがJavaScriptのコーディングスタイルガイドを公開しています。

Google JavaScript Style Guide
Google JavaScript Style Guide 和訳

このガイドに従ったJavaScriptの文法チェックツール Closure Linter がGoogleより提供されているので、これを使ってVimから文法チェックできるようにします。

1. Closure Linterのインストール

How to Use Closure Linterに従ってインストールします。
私はMac環境なので以下のコマンドを実行しました。

$ sudo easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

2. vimと統合する

vimから:makeで呼び出せるようにします。
以下ファイルを作成します。

~/.vim/compiler/gjslint.vim

if exists("current_compiler")
    finish
endif
let current_compiler = "gjslint"

if exists(":CompilerSet") != 2 " older Vim always used :setlocal
    command -nargs=* CompilerSet setlocal
endif

CompilerSet makeprg=gjslint\ %
CompilerSet errorformat=%-P%>-----\ FILE\ \ :\ \ %f\ -----,Line\ %l\\,\ %t:%n:\ %m,%-Q

.vimrcに以下行を追加します。
~/.vimrc

 autocmd FileType javascript :compiler gjslint
 autocmd QuickfixCmdPost make copen

3. 文法チェック
:makeを実行するとこんな感じで文法チェックしてくれます。

Google Closure Linter: vim integration
「Google JavaScript Style Guide」の文法チェックツール + vim で JavaScript の開発を2倍楽にする方法

[Vim] gjslint

以上で環境設定は完了です。
オススメの設定やプラグインなどあればコメントお願いします。

See also :
Hack #160: JavaScript開発環境
VimでJavaScript
Web開発周りのVimの設定