How to Setup Vim as an IDE for React/TypeScript

The most essential plugins for Vim to make it as a perfect IDE for developing React/TypeScript applications.

Developer
Peter G

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.

vim plug

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.

ale vim

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.

vim coc
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.

yats
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.

ctrlp vim
Plug 'ctrlpvim/ctrlp.vim'

Conclusion

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

Author

Bojan Vidanovic is a computer programmer, specialized in front-end web development. Creator of Lynky and Dev & Gear. Love making internet products, blogging, learning, reading, calisthenics and fitness enthusiast.

Read also