2013/05/28

Emacsでflymake-jshintを利用してリアルタイムでのJavaScript文法チェックができるようにする

flymake-jshintを利用して、Emacsで JSHintを利用したリアルタイムでのJavaScript文法チェックができるようにしてみました。

今回利用したEmacsのバージョンは次の通り。

GNU Emacs 24.3.1 (x86_64-apple-darwin, NS apple-appkit-1038.36) of 2013-03-13 on bob.porkrind.org

jshintの導入にはnodeを利用しています。nodeはbrew経由で入れたもので、nodeとnpmのバージョンはそれぞれv0.10.7と1.2.21です。

JS2 modeの導入

まずはflymake-jshintを導入する前に、JS2 modeを導入します。 というか、js2-modeを導入しないとflymake-jshintがうまく動作しませんでした。

導入はパッケージからjs2-modeをインストールし、init.elに次のような設定を追加するだけです。

(autoload 'js2-mode "js2-mode" nil t)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))

ちなみに、JS2 modeにもリアルタイムの文法チェック機能が付いていますので、JS2 modeを入れるだけでもかなり便利になります。

Nodeのjshintの導入

続いてjshintをnpmでインストールします。-gで入れたので、/usr/localあたりに入れられました。

> npm -g install jshint
npm http GET https://registry.npmjs.org/jshint
npm http 200 https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/jshint/-/jshint-2.1.2.tgz
npm http 200 https://registry.npmjs.org/jshint/-/jshint-2.1.2.tgz
  :
/usr/local/share/npm/bin/jshint -> /usr/local/share/npm/lib/node_modules/jshint/bin/jshint
jshint@2.1.2 /usr/local/share/npm/lib/node_modules/jshint
├── console-browserify@0.1.6
├── underscore@1.4.4
├── shelljs@0.1.4
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0)
└── cli@0.4.4-2 (glob@3.2.1)

flymake-jshintの導入

flymake-jshintの導入もパッケージを入れてinit.elに記述を追加するだけです。

(add-hook 'js2-mode-hook '(lambda ()
          (require 'flymake-jshint)
          (flymake-jshint-load)))

が、これで起動したらminorモードにflymakeは入っているようでしたが、エラーになっていました。

Not enabling flymake: 'jshint' program not found

jshintへのパスを追加するとよいみたいなので、init.elに次を追加します。

(setq exec-path (append exec-path '("/usr/local/share/npm/bin")))

これでエラーは見えなくなりましたが、flymakeが動作しているように見えませんでした。

そこで、(setq flymake-log-level 3)しておくと*Messages*にflymake実行時のログが表示されるようになって、原因がわかりました。

file /tmp/test.js, init=flymake-easy--flymake-init
parsed 'env: node: No such file or directory
', no line-err-info
test.js: 0 error(s), 0 warning(s) in 0.18 second(s)

jshint自体は次のようなシェルスクリプトになっています。

> cat /usr/local/share/npm/bin/jshint
#!/usr/bin/env node

require("./../src/cli/cli.js").interpret(process.argv);

どうやら、/usr/local/binにパスが通っていないためにenv nodeがエラーになったようです。

envされたときのためにパスを通すために、init.elに次のようにPATHに追加しました。

(setenv "PATH" (concat (getenv "PATH") ":/usr/local/bin"))

これでflymakeが動作するようになりました。

jshintで警告された行の先頭には!が付きます。それを見るにはm-x flymake-display-err-menu-for-current-lineを利用すればよいみたいです。

flymake-cursorの導入

毎回ポップアップを見るのが面倒だったので、警告をメッセージバッファに表示されるようにするためにflymake-cursorを導入します。

これも、パッケージを入れてinit.elに記述を追加するだけです。

(custom-set-variables
   '(help-at-pt-timer-delay 0.9)
   '(help-at-pt-display-when-idle '(flymake-overlay)))

これで、!のある行でちょっと待つとメッセージバッファにエラー内容が表示されるようになりました。

まとめ

flymake-jshintの導入と利用方法について簡単に紹介しました。

なお、flymake-node-jshintというのもあるのですが、手元の環境では動作しませんでした。

関連リンク

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。