Setting Up Neovim For Typescript Development
Tags: typescript, neovim, vim, node
Published: 2020-11-26 06:18:27

---
title: Setting Up Neovim For Typescript Development
published: true
date: 2020-11-23 19:00:00 UTC
tags: typescript, neovim, vim, nodejs
canonical_url: https://www.theminimalistdeveloper.com/setting-up-neovim-for-typescript-development/
---

[![Hacking away](https://www.theminimalistdeveloper.com/static/86c8e4537055394dbbebc1149b2d4c6e/59822/post-image.png "Hacking away")](/static/86c8e4537055394dbbebc1149b2d4c6e/87488/post-image.png)

Originally posted on [theminimalistdeveloper.com](https://www.theminimalistdeveloper.com/setting-up-neovim-for-typescript-development/)

## Introduction
First things first, right? Yes. So, I am learning [Typescript](https://www.typescriptlang.org/) 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](https://neovim.io/), 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](https://rafaelnexus.com/tutorials/what-is-neovim-and-how-to-install-it-with-python-support/) short and straight to the point post on what is Neovim and how to install it.

### Git
🔗 [git-scm.com](https://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](https://nodejs.org/en/)

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

### Plug
🔗 [github.com/junegunn/vim-plug](https://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](https://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](https://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!