vimでtypescript使うときのオススメプラグイン「tsuquyomi」

「tsuquyomi」というvimプラグインの紹介です。

vimでTypeScriptをコーディングする際にとても便利なものです。 文法の補完や、定義へのジャンプ・利用箇所の表示・文法チェックなどができます。

TypeScript使う場合は、リアルタイムにもろもろのチェックが動くと便利です。多分VSCode使うのが一番便利そうです。でも、Vimでやりたい日も有りますよね。そんなときにtsuquyomiを使うとかなり便利に出来ます。

概要

• インストール
• 使い方

参考URL

https://github.com/Quramy/tsuquyomi

基本的に上記公式Githubに書かれていることを自分用にメモした内容です。 便利な設定等もメモしているので環境の再構築・移動時の参考にする予定です。

インストール

まずは以下が必要です。

• Vim (vim7.4 or later)
• Node.js & TypeScript
• Shougo/vimproc.vim

そしてNeoBundle使って以下でインストールします。

NeoBundle 'Shougo/vimproc.vim', {
\ 'build' : {
\     'windows' : 'tools\\update-dll-mingw',
\     'cygwin' : 'make -f make_cygwin.mak',
\     'mac' : 'make -f make_mac.mak',
\     'linux' : 'make',
\     'unix' : 'gmake',
\    },
\ }

NeoBundle 'Quramy/tsuquyomi'

使い方

Completion

<C-x> <C-o>で補完が使えます。

Navigations

<C-]>でカーソル下の要素の定義へジャンプ。

<C-t>で戻る。

:TsuTypeDefinitionでカーソル下の要素の型定義へジャンプ。

Reference

<C-^>でカーソル下の要素が参照されている場所を表示します。

Keyword search

:TsuSearch {keyword} で開いているファイル・参照されているファイルからキーワード検索ができます。

Show compile errors

バッファを保存したときにチェックが行われます。もしくは:TsuGeterrです。
:TsuGeterrProjectでプロジェクト全体をチェック出来ます。

:TsuQuickFixで修正を行えます。

Configure compile options

tsconfig.jsonで設定できます。

{
  "compilerOptions": {
      "noImplicitAny": true,
      "target": "es5",
      "module": "commonjs"
  }
}

Refuctor

:TsuRenameSymbolシンボルをリネーム。
:TsuRenameSymbolCコメントも含めてリネーム。

autocmd FileType typescript nmap <buffer> <Leader>e <Plug>(TsuquyomiRenameSymbol)
autocmd FileType typescript nmap <buffer> <Leader>E <Plug>(TsuquyomiRenameSymbolC)

tooltip

以下の設定をvimrcにしておくことで型定義などのツールチップを表示できます。 <Leader>tで表示します。

set ballooneval
autocmd FileType typescript nmap <buffer> <Leader>t : <C-u>echo tsuquyomi#hint()<CR>

Create es6 import declaration

:TsuImportをモジュールの上で実行すると、そのモジュールのインポート宣言がファイル上部に追加されます。

なるべく短いパスを指定したい場合は以下の設定をvimrcに追加します。

let g:tsuquyomi_shortest_import_path = 1

syntasticと組み合わせて使う

別のプラグイン「syntastic」と組み合わせて使うことで、タイプチェックの動作や表示をわかりやすくすることが出来ます。

デフォルトでは、バッファ保存時にコンパイルエラーをウィンドウで表示しています。行数などが表示されますが、パッと見ではわかりにくいことも有りますね。

syntasticと組み合わせて使うことで、エラー行の行数の左にエラーマークが出たり、カーソルを合わせるとエラーの内容が表示されるような動作にできます。

"let g:tsuquyomi_disable_quickfix = 1
"let g:syntastic_typescript_checkers = ['tsuquyomi'] " You shouldn't use 'tsc' checker.

syntasticの仕組み上仕方ないのですが、ファイル保存時のコンパイルチェックの動作が少し重くなりました。 それ以外で、ファイルを開くのが遅いときは以下の設定を無効にすると良いです。

let g:syntastic_check_on_open = 1

おわりに

TypeScript使う上でとても便利なプラグインです。他のプラグインも使ったことが有りますが、tsuquyomiは一通り揃っていて簡単に導入できますし、安定しているのでおすすめです。

ただ、大きなプロジェクトとかでチームで開発する場合であれば、他の人と環境を合わせることが大切だったりします。 VScodeを使ってリアルタイムでのチェック等を走らせながら開発するほうが安心です。

一人で個人開発するときはVimで開発できると快適です。ぜひtsuquyomiを利用してVimでTypeScriptの開発を楽しみましょう！