Craftworks Tech Blog - Branch このページをアンテナに追加 RSSフィード

2010-09-08

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

| 19:23 | 「Google JavaScript Style Guide」の文法チェックツール + vim で JavaScript の開発を2倍楽にする方法 - Craftworks Tech Blog - Branch を含むブックマーク 「Google JavaScript Style Guide」の文法チェックツール + vim で JavaScript の開発を2倍楽にする方法 - Craftworks Tech Blog - Branch のブックマークコメント

Google が先日 JavaScriptコーディングスタイルガイド Google JavaScript Style Guide (邦訳) を発表しましたが、今度はその文法に沿ってチェックをしてくれる Lint ツール Closure Linter を公開したようです。

(via. 「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー)

早速インストールして開発効率を上げるべく、開発環境に導入してみたいと思います。

Closure Linter は python 製なので、easy_install でインストールできます。easy_install が入ってなければ、下記コマンドでインストールしましょう。

curl http://peak.telecommunity.com/dist/ez_setup.py | python

easy_install でインストール

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

デフォルトで下記の場所にインストールされました。

/usr/local/bin/gjslint

下記のようにファイル名を渡すと、(--strict オプションもあるようです)

gjslint foo.js

このように Lint 結果を表示してくれます。

Line 1, E:0010: (New error) Missing semicolon at end of line
Line 2, E:0002: Missing space before "="
Line 2, E:0002: Missing space after "="
Line 4, E:0002: Missing space before "("
Line 4, E:0002: Missing space after ";" in for statement
Line 4, E:0001: Extra space before ")"
Line 6, E:0006: (New error) Wrong indentation: expected any of {2} but got 3
Line 9, E:0121: Illegal comma at end of array literal
Line 12, E:0120: Binary operator should go on previous line "+"
Found 9 errors, including 2 new errors, in 1 files (0 files OK).

これだけで充分便利ですが、エディタ上でショートカット一発で文法チェックしてくれるともっと楽なので、vim で呼び出せるようにします。

.vimrc に以下を追記します。

autocmd FileType javascript noremap <buffer> <up> :<C-u>!/usr/local/bin/gjslint %<cr>

これで、JavaScript ファイルを開いている時にコマンドモード中に↑キーを押すとその場でチェックしてくれるようになりました。

[追記]

id:eagletmt さんがさらに便利な使い方を紹介して下さりました。

http://d.hatena.ne.jp/eagletmt/20100910/1284136430