個人プロジェクトのために、JavaScript開発環境の構築をはじめました。
まずは、JavaScriptのコードチェックを行うjslint.vimを導入します。
 |
| jslint.vimによる強調表示 |
JSLintの導入は決定したものの、JSLintのWebサイト版を使うにはコードをコピペしなければなりませんし、コマンドライン版もコマンドを叩く一手間がかかります。
現代的なIDEのように、書いた直後から動的に構文チェックしてもらいたいところです。
そこでjslint.vimを導入することにしました。
jslint.vimの導入
jslint.vimを取得します。
git clone https://github.com/hallettj/jslint.vim.git
ブラウザ外部のJavaScript実行環境として、node.jsをインストールします。
sudo apt-get install nodejs -y
jslint.vimのインストールに必要となるrakeツールをインストールします。
sudo apt-get install rake -y
jslint.vimのリポジトリ内に移動して、rake installを実行します。
cd jslint.vim/
rake install
あとは適当な.jsファイルをvimで開くだけです。
jslimt.vimは、デフォルトで自動的にJSLintによるチェックが行われ、ヒントが表示されるようになっています。
jshint.vimの導入
リポジトリはhttps://github.com/wookiehangover/jshint.vim
を使用しました。
導入手順もgithubリポジトリのページに書いてある通りにします。
このリポジトリからjshint.vimを導入するには、Bundleを使うのが簡単です。
Bundleが導入されていない方は、以下の手順でBundleを導入します。
Vimに、Vundleを使ってBundleを導入します。
手順はVandleリポジトリのページに書かれています。
https://github.com/gmarik/Vundle.vim
Vundleのソースリポジトリを入手します。
git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
Vandleリポジトリのページに書かれている設定を ~/.vimrc に書き込みます。
vimを立ち上げて、Vim中でコマンドを入力してプラグインをインストールします。
vim
:PluginInstall
Vundleは、インストール中にエラーが出ますが、とりあえず大丈夫かと思われます。
リポジトリ管理者の個人にとって使いやすい固定パスが書き込まれているだけで、別段害はないか、
あるいは単にこのコミットにだけ含まれていて、後日修正されるのでしょう。
 |
| Vundleのインストール進行表示 |
:h vundle
にてヘルプが出ることを確認して、Vundleのインストール確認に代えます。
Bundleが導入されている環境で、jshintを導入するために、~/.vimrc に以下の行を書き足します。
Bundle "wookiehangover/jshint.vim"
Vimを起動し、 以下のコマンドにてjshintを導入します。
:so ~/.vimrc
:BundleInstall
ただし、このままでは"node コマンドが無い(意訳)"というエラーが出るので、
sudo apt-get install nodejs-legacy -y
を導入して対応します。
Vimで適当な.jsファイルを開けば、自動的に構文チェックが行われます。
 |
| jshint.vimによる強調表示 |
雑感
jslint.vim/jshint.vim はフォークされたバージョンがいくつかあるようです。選ぶだけでも一苦労。導入方法も、対象のリポジトリや解説しているブログによって異なるため、ちょっと迷います。
jslint.vimのリポジトリは https://github.com/basyura/jslint.vim を使ったほうがよいという意見をあちこちで見かけましたが、今回はとりあえず本家版を使うようにしました。
jslintとjshintの違いとして、ソースの中ほどに書かれた文字列連結への警告表示が、jshintでは表示されたのですが、jslintでは表示されていませんでした。
警告の方針が違うのか、あるいはjslintはソース中に警告箇所を発見すると、そこから下のチェックを行わないのかもしれません。
(あるいは、リポジトリごとの設定の違いによるものかもしれません。)
とりあえず、このあたりはこれから使ってみればわかるものかと思います。
jslint.vimもjshint.vimも、デフォルトのシンタックスカラーでは、文字列が警告に塗りつぶされて読めなくなるようです。
JSLintを導入することにした理由は、以前にCoders at Work プログラミングの技をめぐる探求で、製作者であるダグラス・クロックフォード氏へのインタビューを読んでいたからです。
とはいえJSLint から JSHint をフォークした理由(翻訳)という議論もあるようですので、開発中に無理がでるようなら、チェックが現実的で緩いとされるJSHintに切り替えようと思っています。
閑話休題。
次は、VimにJavaScriptのシンタックスハイライトを導入する予定です。
