⭐ Vim-based IDE? Check out my "Vim From Scratch" book

Setting Up Vim For TypeScript in 2020

By Yanis
February 25, 2019
October 16, 2020

So you want to be as productive with TypeScript as these cool kids with their Visual Code? You came to the right place.

Let's see what we need for a productive Vim setup for TypeScript.

Vim
Vim And TypeScript Are Meant For Each Other

Syntax Highlight

Syntax highlighting

For syntax highlighting, I use a couple of plugins:

Formatting

I use prettier which is an opinionated (but configurable to some extent) formatter for many languages including HTML, CSS and JavaScript. It can also format TypeScript files just fine.

Add this to your file.

autocmd FileType typescript setlocal formatprg=prettier\ --parser\ typescript

Now you can format your entire files with formatting motions, for example gggqG. :help gq for more info.

Intellisense, linting, and code completion

Language servers with LSP support are all the rage these days. Those are separate processes that run in background and can provide your editor with some information and perform some actions on your code.

Typescript comes with one as well. It's called tsserver (tsserver). It's not quite LSP-compliant, but it doesn't really matter, as many Vim LSP plugins support it anyway.

The tsserver covers formatting, linting, going to definition, code completion, and many other features your would expect from a modern IDE.

Now in order to use it properly, you'll need a client. While there are several different options, the one that works better out of the box is called https://github.com/neoclide/coc.nvim.

After installing it with your favorite plugin manager, you'll need to copy the initial configuration (look here), and install Coc plugins. Run:

:CocInstall coc-tsserver

So here's just a quick overview of what you can do now (key mappings should work if you copied the example configuration from the CoC Github page):

  • Your typescript files are now linted by tsscript (it's called "diagnostic" in LSP terms), so you can already spot some errors and navigate them with ]g / [g
  • gd on a symbol will take you to the definition (<Plug>(coc-definition))
  • K on a symbol shows the type information which is quite handy
  • with <leader>rn you can rename files
  • <leader>a for some code actions (for example, extract a piece of code into its own function)

Oh, and here's a handy key mapping to auto-format imports (remove unused and order):

nmap <leader>i :CocCommand tsserver.organizeImports<cr>

Auto-format on save

If you want the code to auto-format via prettier when you save the file, install the coc-prettier extension.

:CocInstall coc-prettier

Now we need to tell prettier to format our file types. Run :CocConfig, and put an option:

"coc.preferences.formatOnSaveFiletypes": ["typescript", "typescriptreact"]

Where to go from here

Vim From Scratch

Learn Vim and upgrade your productivity to the next level by building an IDE of your dreams.

LEARN MORE