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.
Syntax highlighting
For syntax highlighting, I use a couple of plugins:
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.
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):
]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<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>
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"]