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 Highlight

Syntax highlighting

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

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

• Ultimate Vim TypeScript Setup
• Modern TypeScript and React Development in Vim
• Do you also need to setup Vim for React?
• The Vim section on this site has some more interesting stuff