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!
Top comments (0)