Equipping Vim for TypeScript: A Newcomer's Guide

This guide will explain configuring your Vim Editor so that you can maximize productivity when working with TypeScript.

It includes steps on upgrading Vim, installing the necessary plugins, and some helpful configuration options to get you on your way.

If you're a TypeScript developer and haven't tried Vim before, this is a good introduction to the text editor. Using Vim (and tmux1) for writing code in TypeScript, or any language, can bring improvements to your workflow, and increase overall productivity.


You'll first need to ensure you have the following installed on your machine


This is an obvious one. If you don't already have TypeScript installed on your machine, use npm or yarn to install it globally:

$ npm install -g typescript # OR yarn global add typescript

Modern Vim

You will need to have NeoVim installed to take advantage of modern vim features including asynchronous I/O.

If you prefer to keep to regular old vim, it is highly recommended you upgrade your local copy to version 8 (latest at time of writing: 8.1) as it includes the key feature of asynchronous I/O.

Vim Plugin Manager

Every seasoned Vim user has their own list of plugins, and managing that list with a plugin manager is essential. It's what you'll use to add, remove and update your vim plugins.

The ones that are available include:

Find one that you like, and follow its respective instructions to get it up and ready for your local vim installation. You will be using it to install several TypeScript-related vim plugins.

Install typescript-vim

typescript-vim provides the basic syntax files and other settings that Vim needs to understand TypeScript files. Syntax highlighting is something you'll notice as soon as you install this plugin and open a .ts file.

Make sure to install typescript-vim before moving forward, as the typescript filetype that it creates is necessary for subsequent plugins to use.

Install YouCompleteMe

YouCompleteMe is a code-completion engine for Vim, that will automatically connect to tsserver and generate suggestions when writing TypeScript. In addition to TypeScript, works with many languages including C, C#, JavaScript, Rust, and Python.

First, you'll need to install it using your plugin manager of choice.

Secondly, you'll need to navigate to it's installation directory and run a compilation task. According to the instructions, you can specify which languages to target when compiling YCM, but for convenience's sake, I prefer to target all languages:

$ cd ~/.vim/bundle/YouCompleteMe
$ ./install.py --all

Note: As of Nov. 8th, 2017, there was a bug introduced in tsserver that causes it to output NPM warnings and as a result, causes YCM integration to break. The fix has been merged into master, but not released - so you may need to fetch latest from the TypeScript repo in order for code-completion to work with YCM.

$ npm install -g typescript@next # nightly builds

Install ALE

ALE stands for 'Asynchronous Lint Engine', and does just that: asynchronous linting. It 'lints while you type'.

ALE is a useful and powerful plugin, not only for TypeScript, but for any language. It will automatically find a linting engine based on what language you have currently open in Vim, and provide errors and warnings without interrupting your workflow.

Install tsuquyomi

tsuquyomi is the most important TypeScript vim plugin. It provides key features that are exposed by tsserver including jump-to-definition and find all references.

Take a look at the key mappings for some of these features and more to be familiar with them. You may want to add some custom mappings yourself to your vimrc to reduce the amount you have to type.