Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

JavaScript書くときに便利なVimプラギン集

Vim JavaScript

この記事はVim Advent Calendar 2012の52日目の記事です。 前回の記事はasion_mさんのフロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。でした。

良い具合に、フロントエンドのお話続きになっており「流れがキタ！」などと浮かれていたところ、はてなブログが0時から8時まで長時間のメンテに入っており泣きたい気分で一杯になっています。

気を取り直して、エントリを書いていきたいと思います。

さて、自分は一応JavaScriptを書くことで(または書かない事で)オマンマを食べさせていただいてる訳ですが、そういえばあんまりJavaScript書く環境についてブログに書いてないなーと思い、自分が使ってるJavaScript関連のプラギンと設定なんかを紹介していこうと思います。

もちろん、「これは常識でしょpgr」などというものが多数含まれていることは予想されますが、気にしないでください。ということで早速始めていきたいと思います。何だかんだと1年くらいはメインの環境が変わっていないようにも思えるので、ブコメやコメントでおすすめなどありましたら、教えてください。プラギンのURLはあんまり更新されていないものはVim公式、結構な頻度で更新されているものはGitHubの方で書いてる…つもり。ではサクっといきましょー。

あ、インストール自体は、VundleとかNeoBundleとかPathgenとか好きなのでどうぞ。(投げっぱ)

Simple-Javascript-Indenter

VimのJavaScriptのインデントはデフォルトでもそこそこ優秀な部類だと思うのですが、やっぱり複雑なオブジェクトやjQueryなんかでの書き方のときに「いや、このインデントはちょっとねーわ…」みたいな事があると思います。そんな時はこのプラギンを導入してください。劇的にストレスフリーなインデントがお楽しみいただけると思います。

1点だけ、作者も注意書きしてるんですが、switch文は上手くインデントができないようで、こんな感じになってしまうのはご愛嬌です。許してあげてください。ここに目をつぶれば大変に満足がいくインデントになるかと思います。

switch(hoge) {
case 1:
  break;
case 2:
  break;
default:
  break;
}

設定例：

" この設定入れるとshiftwidthを1にしてインデントしてくれる
let g:SimpleJsIndenter_BriefMode = 1
" この設定入れるとswitchのインデントがいくらかマシに
let g:SimpleJsIndenter_CaseIndentLevel = -1

Syntax file for jQuery

jQueryのシンタックスです。これの良いところはjQueryのメソッドやjQueryオブジェクトのIDとクラスを色分けしてくれるところです。特にIDとクラスは「いやいや、いくら何でも間違えないでしょう…」と思ってても似たような名前のものだと、たまにIDをいじってたと思ってたら、クラスの方だった…みたいなことが起きて、何を言ってるか分からねーと思うが俺も何を(ry ということになります。

そんな時はこのシンタックスがあると色分けされるので間違えにくくなる気がします。デフォルトではファイル名がjQueryプラグインじゃないとこのシンタックスを適用してくれないので、むりやり:setl syntax=jqueryとかにすると普通のJavaScriptファイルでも色分けしてくれます。

ただ残念なことにjQueryのv1.5.1以降更新がされていないんですよね…。実用上はあんまり問題ないんですが、forkしてあるんで時間あるときに更新しようかと考えています。いつになるんだろうか。 設定例：

au BufRead,BufNewFile jquery.*.js set ft=javascript syntax=jquery

vim-javascript-syntax

VimのJavaScriptのシンタックスはデフォルトでもそこそこ優秀な部類だと思うのですが、やっぱり複雑なオブジェクトなんかや細かい部分の色もつけてみたいところです。

このシンタックス入れると例えばfunctionの後の関数名や無名関数や、等価演算子やら細かいところまで行き届いたシンタックスカラーが堪能できることでしょう。

詳しくは、GitHubレポジトリのスクショ見てください。

ここまでは、まあ基本の基本っすよね。ここだけでもデフォルトのVimよりも使いやすくなっていると思いますが、以下のプラギンを目的に応じて入れるともっとステキング。

neocomplcache

説明不要でしょうが、necoです。これを入れるとまあ補完が捗る捗る。自分はJavaScriptのスニペット用としてhonza/snipmate-snippetsを入れてたりします。本当はnecoのバージョンアップに合わせて、こちらのスニペットもneco仕様にしたいんですが、面倒なんでやってないっす…。

設定例は長いので省略。

jscomplete-vim

JavaScriptのメソッド補完を可能にしてくれるプラギンです。ES.nextとかVimperatorで有名なteramakoさん作のステキプラギンです。これは自動で上で紹介してるneocomplcacheと連動してくれます。これがあるのと無いとでは、補完自体の賢さが違ってきます。メソッドを書くのに.なんかを入れただけで、空気を読んだ補完候補を出してくれます。

設定例：

" DOMとMozilla関連とES6のメソッドを補完
let g:jscomplete_use = ['dom', 'moz', 'es6th']

syntastic

これもnecoと同じで特にJavaScript専用ということはないですが、Vimのもはやデファクトなシンタックスチェッカーになった感のあるプラギンです。これの良いところは、jslintやjshintやClosure Compilerなど環境に入ってさえいれば勝手にそれを使ってシンタックスチェックしてくれるというところです。大体JavaScript書く人でVimとか使ってる人の環境にはどれかは入ってると見越してるんでしょうか。自分は保存のタイミングでチェック走らせてますが、任意のタイミングでチェックもできるし、エラー内容はquickfixに出たりするので大変に修正がしやすいです。

設定例：

" このようにするとjshintを必ず使ってチェックしてくれるようになる
let g:syntastic_javascript_checker = "jshint"

ここまで揃えるともはや、JavaScript書くのには完成系だと思います。が、こっからはさらに目的を絞ったプラギンを導入していくと、毎回使うことはなくても「かゆい所に手が届く」環境になっていきます。

tagbar

ctagsなどで生成したタグファイルを表示してくれるプラギンです。これを入れるとctagsなどのパスさえ設定しておけば、ファイル内の関数や変数なんかが一覧で見られて定義場所に簡単にジャンプできるようになります。

規模が大きいソースになると「これどこで定義してるんだよ…」ということが起こりがちですが、このプラギンのおかげでIDEのように簡単に目的の関数なんかが探せるようになります。

自分は以前に紹介したDoctor.jsと組み合わせてJavaScript用のタグを表示しています。また今回紹介してませんが、CoffeeScriptのタグ生成の設定なんかもしてます。

設定例：

nnoremap <silent> <F9> :TagbarToggle<CR>
" ctagsはMacVim-kaoriyaの使ってる
let g:tagbar_ctags_bin = '/Applications/MacVim.app/Contents/MacOS/ctags'
" JavaScriptにはjsctagsを使用
let g:tagbar_type_javascript = {
    \ 'ctagsbin' : '/usr/local/share/npm/bin/jsctags'
\ }

vim-buster

知ってる人は知ってると思いますが、Buster.jsというテスティングフレームワークがあります。個人的にはJasminとかよりも好きなので、個人のプロジェクトに使ったりしてますが、その導入を助けてくれる、Vimプラギンです。

*-test.jsなどのファイルタイプでフックするようにすると、テストファイルを開いておいて:makeとするとbuster testが走ったりしてくれます。あとassertなんかもnecoを導入してると補完してくれるように(なぜか)なります。実は以前にJasminも使わなければならなくなってjasmin.vimという同じようなプラギンを入れたら、ばっちりとバッティングしてしまい、「まあbusterの方入れててもBDDっぽい補完してくれるし」という理由で、jasmin.vimの方は外してしまいました。

好みに応じて、テスティングフレームワークも、Vimプラギンも使い分けが必要なようです。 特に設定はしていなくても使えると思います。

vim-handlebars

知ってる人は知ってると思いますが、Handlebars.jsというJavaScriptテンプレートエンジンがあります。個人的にはejsとかよりも好きなので、業務でも使ったりしてましたが、そのシンタックスハイライトしてくれる、Vimプラギンです。

拡張子が.hbや.handlebarsなんかのものは勝手にシンタックスハイライトしてくれます。自分はしてませんが、普通のHTMLにscriptタグとしてテンプレート書いてる場合なんかは、ファイルタイプをもごもごすると良いんじゃないでしょうか。(やったことない)

これも設定は特にしていなくても使えると思います。

と、自分のVim + JavaScriptの環境はこんな感じになっております。他にもVim自体を便利にするプラギンなどはもちろん多数ありますが、JavaScriptに焦点を絞ると上記のような環境です。

この環境で満足度が非常に高いために、あまりJavaScript関連で他のプラギンなんかを積極的に探すという機会が減っているのですが、もちろん良いプラギンがあれば使っていきたいと思います。

何だかデジャブのように似たような文章を繰り返してしまいましたが、これで今回のエントリは終了としたいと思います。

明日のAdvent Calendarはaespinosaさんのエントリーになります。楽しみですね。