Setting Up Vim For TypeScript in 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.
For syntax highlighting, I use a couple of plugins:
HerringtonDarkholme/yats.vim for basic syntax support
https://github.com/MaxMEllon/vim-jsx-pretty JSX support for both jsx and tsx files
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.
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.
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):
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
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>
Auto-format on save
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"]