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.
For syntax highlighting, I use a couple of plugins:
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
:help gq for more info.
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.
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:
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):
gdon a symbol will take you to the definition (
Kon a symbol shows the type information which is quite handy
<leader>rnyou can rename files
<leader>afor 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>
If you want the code to auto-format via prettier when you save the file, install the
Now we need to tell prettier to format our file types. Run
:CocConfig, and put an option:
"coc.preferences.formatOnSaveFiletypes": ["typescript", "typescriptreact"]