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.
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:
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
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.
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.
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.
These are some of the most essential plugins to get you going writing the code in React and TypeScript.
Bojan Vidanovic is a front-end developer at Subito.it, and also creator of Lynky and Dev & Gear. Love making internet products, blogging, learning, reading, calisthenics and fitness enthusiast.