Node.vimがステキ
どうもあんまり話題になっていない感あるんですが,Node.vimというVimプラグインが大変ステキな感じです.
そこそこ開発も活発な感じです.
機能としては,ざっくりこんな感じ.(README読めば分かるんですけど)
- 標準の
gf
とかC-w f
とかするとrequire()
のモジュールに飛ばしてくれる [I
をメソッドにカーソル当てて入力するとそのファイルはもちろん,require()
内からでも検索してプレビューウィンドウに表示- 最近できた機能ですが
:NEdit module/path
とするとそのファイルを開いてくれる
などなどカユいところに手が届いてるプラグインです.
Node.js + Vim使ってる人にはオススメの逸品.
JavaScript書くときに便利なVimプラギン集
この記事は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さんのエントリーになります。楽しみですね。
Doctor JSがとても良い件
新年明けましておめでとうございました。今年もゆるくお願いします。
全然正月とか新年に関係無いのですが。 何だかググってもあんまり情報が出てこないので。
Vimだけじゃないですが、ctagというコマンドがあります。これはソースコードの関数やら変数やらをインデックスしておくファイルを作ってくれるという便利コマンドでして、これを使ってVimから関数呼び出ししている部分でC-[
を押すと、定義部分に飛んでくれてC-t
で元の場所に戻るというとてもIDEライクに動かす事ができるものです。
で、これはずっと使っていたんですが、自分の専門(なはず)のJavaScriptの場合は、どうもあんまり上手く解析してくれない…。ちょっと不便ではあるんだけどまあ使えてはいたんで良かったんですが。現在、MozillaがDoctor JSというプロジェクトでJavaScript用のctagを作ってくれています。GitHubのREADMEを読む限りBespinで使うという事で作ってるのかな?
元々Mozillaの中の人がjsctagsというプロダクトを作ってたらしいのが、正式にMozillaのプロジェクトになって名前が変わったらしいです。(コマンド自体はjsctags
ですけども)
気になるインストール方法は、実は超絶簡単です。
$ brew install jsctags
終わり。一応node.jsに依存してるらしいので、使用前には入れないとですが、大体最近の良い子はnode.jsを入れてるはずなので、割愛。
1/3追記:
gyaaaaaaaa!新年早々嘘書きました、すいません。 正しくは、Homebrewじゃなくってnpmでのインストールです…。
$ npm install -g jsctags
上記のコマンドでした。なので、npmが入ってるなら、node.jsも入ってるわけで…。大変失礼しました。下でTagbarの設定でもnpm指定してるのに何でこんな間違いを…。穴があったら埋めたい。
追記終わり
使い方自体は
$ cd project
$ jsctags lib
プロジェクトのトップで、解析したいディレクトリを引数にjsctags
コマンドを入れるだけです。
tags
というファイルがトップディレクトリに出来ると思うので、そちらを各エディタで使用する形になります。
で、VimではTagbarというプラギンと一緒に使うと非常に使いやすいものになります。元々TagbarはctagをVimで一覧できるというようなプラギンなのですが、これでjsctags
の設定をしておくと大変に幸せになります。.vimrcの設定はこんな感じで。
let g:tagbar_type_javascript = { \ 'ctagsbin' : '/usr/local/share/npm/bin/jsctags' \ }
g:tagbar_type_javascript
にjsctags
のパスを渡すと使えるようになります。Tagbarを使う場合は上記のtags
を作成しなくても勝手に解析してくれるので、面倒がありません。
見た目はこんな感じで、ちゃんとjsdocsの情報とかも出てて非常に見やすくなります。
Omni補完の複数のomnifuncを同じfiletypeに複数設定できたかも
Vimでomni補完で使用するomnifuncを同じfiletypeで複数設定したい - Life goes on
こちらのエントリーで、Shougoさんからコメントを頂いたので、週末ちょっと試してみました。
結果上手く設定できた…かも?とりあえず、今の所は実用上不便は無い模様なんでこれでしばらくはいってみようかな。
autocmd FileType javascript setlocal omnifunc=javascriptcomplete#CompleteJS if !exists('g:neocomplcache_omni_functions') let g:neocomplcache_omni_functions = {} endif let g:neocomplcache_omni_functions.javascript = ['nodejscomplete#CompleteJS', 'javascriptcomplete#CompleteJS']
こんな感じで設定したところ、上手く行くようになりました!Shougoさんありがとうございます!
まあこれで良いのか、不明ですけども自分の用途では問題無い感じかな。