Setting Up Neovim For Typescript Development

Originally posted on theminimalistdeveloper.com

Introduction

First things first, right? Yes. So, I am learning Typescript whenever I start learning a new programming language, I begin by setting up a development environment.

Everything necessary to properly run the code snippets, tests, etc. It feels like a solid foundation to start building on.

Since my weapon of choice is Neovim, here I will describe what it took for me to have a development environment for Typescript with autocomplete, jump to definition, code validation, documentation display in place, and all that good stuff.

Requirements

This post will focus specifically on the components necessary for Typescript development. I am assuming you already have Neovim installed and configured. If that is not your case, don't panic! Check out this short and straight to the point post on what is Neovim and how to install it.

Git

🔗 git-scm.com

Coc and its extensions require Git. It is fair to assume that every developer has Git on their machines, but better safe than sorry :D

NodeJS

🔗 nodejs.org

We need to, you know, run the code after compiling it. I currently am using version 12.

Plug

🔗 github.com/junegunn/vim-plug

Plug is a plugin manager for Vim/Neovim. It is possible to achieve the same result with any other plugin manager for Vim or Neovim, but if you want to follow along with this post, it is easier to have Plug in place.

Installation

CoC

🔗 github.com/neoclide/coc.nvim

CoC or Conquer of Completion is a plugin that interfaces with language servers to provides a lot of great features like proper autocomplete, jump to definition, documentation display, refactoring tools, etc.

The installation of the CoC is very straight forward. Simply add this line to your init file:

Plug 'neoclide/coc.nvim', {'branch': 'release'}

And run on Neovim:

:PlugInstall

Which is the command from Plug to install the plugins listed on your init file. Remember to source again your init file:

source /path/to/your/init.vim

CoC Tsserver extension

🔗 github.com/neoclide/coc-tsserver

CoC plugin on its own does not do much for us. We need to install an extension to add the features we want.

The extension in question is called Tsserver, which is a language server for Typescript and Javascript.

To install, run this command from Neovim:

:CocInstall coc-tsserver

To check if everything went as expected, run this:

:CocList extensions

This will open up a window with all the installed extensions for CoC, you should see listed, something like this:

+ coc-tsserver 1.5.6 ~/.config/coc/extensions/node_modules/coc-tsserver

That means that everything is correct!

So, what can we expect from this extension?
Here is the feature list from the official Github repository:

Supports javascript & typescript and jsx/tsx.

Installs typings automatically.

Commands to work with tsserver, including:

• tsserver.reloadProjects

• tsserver.openTsServerLog

• tsserver.goToProjectConfig

• tsserver.restart

• tsserver.organizeImports

• tsserver.watchBuild

Code completion support.

Go to definition.

Code validation.

Document highlight.

Document symbols of current buffer.

Folding and folding range of current buffer.

Format current buffer, range format, and format on type.

Hover for documentation.

Implementations codeLens and references codeLens.

Organize imports command.

Quickfix using code actions.

Code refactor using code actions.

Find references.

Signature help.

Rename symbols support.

Rename imports on file rename, require watchman installed in your $PATH.

Search for workspace symbols.

A pretty sweet list, huh?

Conclusion

As we've seen, it is not that difficult to have a complete Typescript setup running with Neovim and CoC in no time.
There is so much more we can tweak and improve. This is the bare minimum to get you going with Typescript on Neovim.

Next, let's dig a little deeper on Tsserver CoC extension and some other cool Neovim plugins!