How to Get Syntax Highlighting for TypeScript in GVIM on Windows

urghh… Looks terrible doesn’t it? It’s not provided by default, but if you need to work with a TypeScript project in vim then you’ll certainly need to set up syntax highlighting.

The good news is that it’s very easy to get going with a vim addon called typescript-vim. This link is all you need if you already have a vim addon manager, but otherwise I’d recommend you install pathogen.

To install pathogen on Windows, you’ll need to download pathogen.vim from https://github.com/tpope/vim-pathogen/ and place it under %USERPROFILE%vimfilesautoload (for me, that was C:Usersglcheethamvimfilesautoloadpathogen.vim). The easiest way to do this is to execute the following in a shell:

cd %USERPROFILE%vimfiles
git clone https://github.com/tpope/vim-pathogen/

Next, to get pathogen to load on vim startup, you’ll need to place the vimscript code at the top of your vimrc (or %USERPROFILE%_gvimrc for me)

execute pathogen#infect()
filetype off
syntax on
filetype plugin indent on

Don’t mind the microbe metaphors, that’s just the author’s sense of humour.

Now, to install the syntax highlighting plugin, you’ll need to place the files from https://github.com/leafgarland/typescript-vim into %USERPROFILE%vimfilesbundle. Again, the easiest way to do this is git clone:

cd %USERPROFILE%vimfilesbundle
git clone https://github.com/leafgarland/typescript-vim

And… that’s it! Pathogen should now helpfully load the typescript-vim package for you whenever vim starts up – and you’ll be able to carry on working without going cross-eyed.