How to Setup Vim as an IDE for React/TypeScript

Thanks to the Vim’s vast choice of plugins, I’ve been using Vim daily for developing React applications in TypeScript. I classify these plugins as essential to make Vim a perfect IDE environment for programming although you might not need them as you can already do anything out-of-the-box, I’d still recommend installing them and making code writing more enjoyable and less error-prone.

I assume you have some basic skills in Vim or read my previous article as a starting point.

Install plugin manager

Before we install any of the plugins, first we will need a plugin manager. There are many plugins managers for Vim, but always recommend using vim-plug mainly for its simplicity and ease-of-use.

So go ahead and execute this command in the CLI:

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

After it finished, add a vim-plug section to your ~/.vimrc file.

call plug#begin()
" In this section you will manage all of your future plugins.
" Plug 'example-path-to-git-repository'
call plug#end()

Essentially, in this block of code we have added you will include the path to the repository of the plugin you want to install by inserting Plug 'path-to-repo' and from inside Vim you will call: PlugInstall.

Asynchronous Lint Engine

ALE is a plugin that will provide linting with syntax checking and semantic errors for your code.

Let’s install it by including it in the Vim Plug and call :PlugInstall

Plug 'dense-analysis/ale'

After this, I recommend reading the documentation of the plugin to adjust the plugin better to your style of writing code.

CoC - Conquer of completion

CoC is a completion engine and you really really want this one. This plugin saves me a lot of typing and peaking into other files for properties verification.

Plug 'neoclide/coc.nvim'

YATS: Yet Another TypeScript Syntax

YATS is a TypeScript syntax highlighter with the most appealing color scheme for TypeScript code. Not just making your beautiful but also much more readable.

Plug 'HerringtonDarkholme/yats.vim'

ctrlp.vim - Fuzzy finder

You might have used this feature in VSCode, with ctrlp.vim plugin we can get the same functionality. Very useful for searching the files on the go.

Plug 'ctrlpvim/ctrlp.vim'

Conclusion

These are some of the most essential plugins to get you going writing the code in React and TypeScript.