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.

Pre-requisites

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

TypeScript

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

Vim 8

It's highly recommended you upgrade your local copy of Vim to version 8 as it unlocks a key feature used in many plugins, which is asynchronous I/O.

Below are instructions on how to upgrade for various platforms.

MacOS

Using HomeBrew2, run the following:

$ brew update
$ brew install macvim

Once you've installed, you may need to restart your shell in order for changes to take effect.

Windows

Download and install from here.

Ubuntu/Debian

First, add this PPA3 that provides up-to-date releases from the vim GitHub repo:

$ sudo add-apt-repository ppa:jonathonf/vim

Then, the following two commands:

$ sudo apt update
$ sudo apt install vim
Other

Visit the official Vim download page, and follow the instructions.

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.

References