タオルケット体操

サツバツいんたーねっとでゲームとかガジェットのレビューとかをします

トップ > Vim > VimでTypeScriptの補完などを有効にして快適にエディット出来るようにする設定

VimでTypeScriptの補完などを有効にして快適にエディット出来るようにする設定

Vim TypeScript プログラミング
Sponsored link

いつの間にかVimプラグインが充実してきてたので、TypeScriptもVimで書くようになりました。

シンタックスハイライトとインデント

標準ではハイライトやファイルタイプの検出が存在しないので以下のプラグインを導入します。

NeoBundleLazy 'leafgarland/typescript-vim', {
\ 'autoload' : {
\   'filetypes' : ['typescript'] }
\}

また、上記のプラグインだけだとインデントがクソなので以下のプラグイン + 設定を導入します。

NeoBundleLazy 'jason0x43/vim-js-indent', {
\ 'autoload' : {
\   'filetypes' : ['javascript', 'typescript', 'html'],
\}}
let g:js_indent_typescript = 1

これで、ひとまずは普通にコーディング出来るようになりました。

また、AngularJS, jQuery, underscore, Jasmineなどの有名ライブラリのシンタックスを追加したければ othree/javascript-libraries-syntax.vim · GitHub の導入もおすすめです。

補完

静的言語は補完が効いてナンボです。

NeoBundleLazy 'clausreinke/typescript-tools', {
\ 'build' : 'npm install -g',
\ 'autoload' : {
\   'filetypes' : ['typescript'] }
\}

これで補完、ビルド、シンボルへのジャンプなどのIDE的な機能が使えるようになります。
具体的な使い方はREADME.mdやヘルプを読んでください。

時々補完の挙動がおかしい気もしますが、細かいことを気にするのはよしましょう。

なお勝手にnpm installが走るのが嫌な人は、上記の'build'の部分を消して、手動でnpm install -g typescript-toolsと入力しましょう。

また、何故か僕の環境だとomnifuncが自動で設定されません。
同じような現象に見舞われている方は~/.vim/after/ftplugin/typescript.vimに以下の設定を突っ込みましょう。

if exists('b:did_ftplugin_typescript')
    finish
endif
let b:did_ftplugin_typescript = 1

setlocal tabstop=2
setlocal softtabstop=2
setlocal shiftwidth=2

if exists('*TSScompleteFunc') && &omnifunc ==# ''
  setlocal omnifunc=TSScompleteFunc
endif

TSScompleteFunc関数が存在（typescript-toolsがインストール）していて、omnifuncが設定されていなければよしなにしてくれます。
タブ幅が2なのは僕の趣味です。

なお、静的な検査についてはtscコマンドが使える状態であればosyo-manga/vim-watchdogs · GitHubがよしなにやってくれます。便利ですね。

設定

さらにもうちょっと快適に使えるよう、手を加えます。

いちいちCtrl + x, Ctrl + oなどと手押しするのは面倒なので、NeoComplete経由で補完を呼び出すようにします。
ここではNeoComplete自体の細かい設定などについては言及しません。

input_patternsを設定してやることで補完のタイミングを指定出来ます。

  let g:neocomplete#sources#omni#input_patterns.typescript = '\h\w*\|[^. \t]\.\w*'

成し遂げたぜ。

typescript-toolsは他にも色々と便利な関数やコマンドがあるっぽいので、気が向いたら適当なキーバインドとかを設定するといいんじゃあないでしょうか。