Vim で TypeScript のコード補完をさせようとする試みについてのメモ、あるいは neocomplcache プラグインの書き方について

昨日書いたように、Vim で TypeScript のコード補完させたいなーと思いながら TypeScript のコード補完方法について調べてた わけですが、そのままの勢いで Vim プラグインとか node とかいじって、とりあえず Vim 上で単一 TypeScript ファイル中のプロパティ名を補完させることはできるようになったのでメモ書きしておきます。

デモ

現状のデモ *1。 型を見てプロパティ名の候補一覧を出してくれます。

補完の仕組み

neocomplcache の source を書きました

普段から Vim を使ってはいるものの Vim のことよく知らなくて、「補完のためのコードどうやって書いたらいいかわからんー」 などとついったーでうだうだ言ってたら id:thinca さんと id:osyo-manga さんが色々教えてくださいました。

@nobuoka @thinca 補完周りはよく知りませんが、Vim script であればある程度は…。とりあえず、Vim で補完を行うのであれば neocomplcache の source を書くのが一番手っ取り早いかと。

— おしょー（実際Vimに呪われてる）さん (@manga_osyo) 11月 3, 2012

@nobuoka @thinca 以前書いた JSX の補完が参考になるかなぁ（仕様が古いので今は動かなかったりするんですが…。 github.com/osyo-manga/neo…

— おしょー（実際Vimに呪われてる）さん (@manga_osyo) 11月 3, 2012

「Vim で補完を行うのであれば neocomplcache の source を書くのが一番手っ取り早い」 らしい、というわけで neocomplcache の source (neocomplcache プラグイン) を書くことにしました。

neocomplcache プラグインの書き方

neocomplcache というのは、コード補完のための Vim プラグインです。

Neocomplcache performs keyword completion by making a cache of keywords in a buffer. I implemented it because unlike the Vim builtin keyword completion, neocomplcache can be customized flexibly. Unfortunately, neocomplcache may use more memory than other plugins.

neocomplcache の README より

そして、neocomplcache プラグインを書くことで、neocomplcache の補完ワード一覧を独自に定義できるようです。 neocomplcache のドキュメント の neocomplcache プラグインの書き方が執筆中だったのでどうやって書けばいいのかよくわかんなかったのですが、vim-users.jp の方に詳しい解説がありました。

• Vim-users.jp - Hack #169: neocomplcacheを拡張する 後編

あと、『Vim テクニックバイブル』 にも詳しい情報が載っているとの情報をプラグイン作者の Shougo さんに教えて頂きました。 読みます!

Vimテクニックバイブル　?作業効率をカイゼンする150の技

@nobuoka そこら辺の細かい仕様は（ちょっと古いですが）vim-users.jp/2010/08/hack16… や　vim-users.jp/2009/05/hack14/　が参考になるかと。（古いので現在の仕様と照らし合わせながら見るといいかなぁ…。

— おしょー（実際Vimに呪われてる）さん (@manga_osyo) 11月 3, 2012

@nobuoka @manga_osyo あとは、今ならVimテクニックバイブルにも仕様が載っています。ドキュメントは整備したいんですが、その他のToDoが多すぎて……

— Shougo.Matsuさん (@ShougoMatsu) 11月 4, 2012

そんなこんなで neocomplcache プラグインの書き方がわかったので、以下のような感じで書きました。

• nobuoka's gist: 4012062 — Gist

補完の処理自体 : node で HTTP サーバーを動かしてその中で補完候補を取得

補完の処理自体は Vim プラグインの内部ではなく外部に投げています。 パイプを開くなどすればよいのでしょうが、Vim script 内でパイプ開く方法がわからなかったので、node を使ってローカルホストで HTTP サーバーを動かし、Vim スクリプトの中から curl コマンドでリクエストしています。

node で動かしている HTTP サーバーの中身でどういう風に補完候補を取得しているかですが、大体昨日書いたような感じでやっています。

• TypeScript の補完候補を取得する方法メモ - ひだまりソケットは壊れない

さすがに HTTP サーバーを動かすという方法はちょっとなー、という感じなので、別プロセスとのやりとりをうまく Vim script でやるための良い方法を知りたいところです。

おわり

そんな感じで、とりあえず単一の TypeScript ファイルの補完処理を Vim 上でできるようになりました。 わーい。 あとは複数ファイルに対応するのと、裏で動かす補完処理のためのプロセスを HTTP サーバーじゃなくて別のものにするということをすればそれなりに実用的に使えるのではないかなーという気がしています。

はじめて Vim script をちゃんと書いたり、はじめて node をそれなりにいじったりしたので結構勉強になった気がします。 いろいろ教えてくださった Vim 界隈の皆様ありがとうございますっ。

*1:Windows の Expression Encoder 3 で動画を作成しました。 無料版だと WMV にしかエンコードできないっぽいけど結構便利。