TypeScript を vim に導入して Syntax Highlight する

ts.md

2017/12/26追記

Vundle を使っている方は、 https://stackoverflow.com/questions/35087549/typescript-syntax-highlighting-in-vim を参照してください。

本文

TypeScript のコードを書くにあたって、
黒い画面の vim と MacVim で Syntax Highlight したいです。

~/dotfiles/.vimrc があり、 ~/.vim/bundle/ があるものとして進めます。

1. https://github.com/leafgarland/typescript-vim を fmfm します

2. clone します

   $ cd ~/.vim/bundle/
   $ git clone [email protected]:leafgarland/typescript-vim.git
   $ cd typescript-vim

3. .vimrc に設定を追加します

   $ vi ~/dotfiles/.vimrc 

   + " TypeScript
   + Bundle 'typescript-vim'
   + autocmd BufRead,BufNewFile *.ts set filetype=typescript
   

4. MacVim を開き :BundleInstall コマンドを実行します

   :BundleInstall

5. syntax ファイル(typescript.vim)のコピー先を探します

   $ locate synload
   > /Applications/MacVim.app/Contents/Resources/vim/runtime/syntax/synload.vim
   > /usr/share/vim/vim73/syntax/synload.vim

6. コピーします

   $ cd typescript-vim/syntax/
   $ cp typescript.vim /Applications/MacVim.app/Contents/Resources/vim/runtime/syntax/typescript.vim
   $ sudo cp typescript.vim /usr/local/share/vim/vim73/syntax/typescript.vim

7. a.ts を作成(必要なら :source ~/.vimrc で設定を反映させます)します

   $ vi a.ts

   function helloTypeScript() { }
   

8. 上手くいっていれば、色がついています。

上手く行かない場合は、set filetype の結果を確認します

:set filetype
> filetype=typescript

手動で設定してみたりします

:set filetype=typescript

これで色がついたら .vimrc を見直したり、牛乳に相談するなどのネクストアクションを行います。

(つ◇⊂) 思い出して書いたから、ちょっと途中抜けてるかも…