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
yarn to install it globally:
$ npm install -g typescript # OR yarn global add typescript
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.
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.
Download and install from here.
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
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:
- pathogen (https://github.com/tpope/vim-pathogen)
- Vundle (https://github.com/VundleVim/Vundle.vim)
- vim-plug (https://github.com/junegunn/vim-plug)
- dein (https://github.com/Shougo/dein.vim)
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.
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
Make sure to install typescript-vim before moving forward, as the
typescript filetype that it creates is necessary for subsequent plugins to use.
YouCompleteMe is a code-completion engine for Vim, that will automatically connect to
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
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.
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.