TypeScript is a transpiled language that allows using types in your JavaScript code (strictly saying it's a superset of JavaScript) and thus catching errors at compile time and making the code more reliable.

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

Syntax Highlight

For syntax highlighting, I use a couple of plugins.

• The first one is leafgarland/typescript-vim for .ts files
• and ianks/vim-tsx fot .tsx (which you may not need if you're not using React).

Formatting

I use prettier which is an opinionated (still 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

And now you can format your entire files with formatting motions, for example gggqG. If you don’t know how formatting motions work in Vim you can use :help gq.

Prettier is a bit too opinionated for my taste, so I still have some configuration:

// .prettierc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

Feel free to modify the configuration and put into the directory with your project.

Completion

Typescript comes with a so-called TypeScript server (tsserver) which is while running in the background allows for faster compiling and provides some services as autocompletion, linting and so on. You can think of it as a headless IDE. Other IDEs and editors can communicate with it and they do it with a help of plugins.tools.

There are 2 viable options for Vim.

• First, if you want a standalone plugin for everything you should use Quramy/tsuquyomi. It's a really great plugin with many features.
• But if you're more like me, you probably using some completion plugin already. For example, the magical Shougo/deoplete.nvim . In this case, it is much more convenient to use mhartington/nvim-typescript plugin, which plays well with deoplete and becomes a natural part of your Vim setup.

Linting

The last but not the list is linting. TypeScript itself is essentially a linting tool which can give catch errors at compile time. But there's also a tslint which is very similar to now industry-standart eslint.

For linting I usually use ale which is fantastic tool. It runs the linting in the background and thus doesn't make your editor slow. If you still don't use it, give it a try now. It is an essential one.

If you have it installed already, all you have to do is add it to your config:

let g:ale_linters = {
\   'javascript': ['eslint'],
\   'typescript': ['tsserver', 'tslint'],
\   'vue': ['eslint']
\}

And while we are here I also recommend to use prettier for fixing.

let g:ale_fixers = {
\    'javascript': ['eslint'],
\    'typescript': ['prettier'],
\    'vue': ['eslint'],
\    'scss': ['prettier'],
\    'html': ['prettier']
\}
let g:ale_fix_on_save = 1

The last options turns on the fix on save option. Real handy.

Where To Go Next

• The TypeScript Official Documentation
• The other editors can also work with TypeScript
• Do you also need to setup Vim for React?
• The Vim section on this site has some more interesting stuff