Dark Mode

How to Set up Vim as an IDE for React and TypeScript in 2020

Vim as an IDE for React and TypeScript Development in the era of modern IDEs like Intellij and VSCode, but why? Here are some reasons why people prefer using Vim as their goto code editor.

  • Used Vim as the first IDE and got used to it.
  • Lightweight and works smoothly without lags.
  • Keyboard shortcuts that it provides improve productivity.
  • Like the feeling of typing stuff into the terminal. (sorry!)

If you are not a Vim fan but somehow stumbled upon this article, I would still recommend you to try it out. After all, don’t you want to know what is so special about it?

Check If Vim is Installed

Open the terminal and run the command vim. If you see an error like “command not found,” then you don’t have it, and you need to install it.

But, if you see a screen like this, then you have Vim already. You can skip the installation section.

Install Vim

Vim can be installed using the built-in package manager.

Mac OS X

brew install vim

Ubuntu

apt-get install vim

Fedora

dnf -y install vim-enhanced

Install Vim Plugin Manager

To set up Vim as an IDE, we will be installing quite a few Vim plugins. To manage all these plugins easily, we will use a plugin manager vim-plug.

Install vim-plug by running the following command.

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

Open .vimrc file, and add the following block of code.

call plug#begin()
" This is where we will add plugins to install
call plug#end()

To install a plugin using vim-plug, add the list of plugin names between the two call statements. Then restart Vim and run the Vim command :PlugInstall to install all the plugins declared in the .vimrc file. Read more vim-plug usage here.

Tip: Instead of restarting Vim, you can reload the Vim configuration by running the Vim command :so %.

Also Read: My VSCode Setup – Plugins, Icons, Fonts & Theme

Intellij Color Scheme

We will be using a color scheme inspired by Intellij – gruvbox. Another reason to use this is, it works well with the syntax highlighter plugins.

To install, open ~/.vimrc and add the plugin name between call plug#begin() and call plug#end(). Like so:

call plug#begin()
" This is where we will add plugins to install

Plug 'morhetz/gruvbox'

call plug#end()

Restart Vim and run the Vim command :PlugInstall. Then, the plugin will be downloaded and installed.

Now to configure Vim to use the gruvbox color scheme add the following line to .vimrc.

colorscheme gruvbox

Matching Color Scheme for Terminal

You can match your terminal’s color scheme to Vim’s color scheme by using the ports of the gruvbox color scheme. https://github.com/morhetz/gruvbox-contrib

Download the color scheme based on your terminal and import it.

For example, for iTerm2 download this file. Open iTerm2, Preferences -> Profile -> Colors tab -> Colors Preset -> Import.

terminal color scheme

TypeScript Syntax Highlighting

To get the beautiful syntax highlighting that you saw in one of the previous images, we will use a plugin called yats (Github).

Plug 'HerringtonDarkholme/yats.vim'

Yats provides better syntax highlight compared to all the alternatives, but Yats is also heavier compared to others. If you prefer a lightweight plugin and ok with simple syntax highlighting, then you can check out typescript-vim(Github) plugin.

Intellisense for TypeScript

I wasn’t convinced to try Vim as an IDE as setting up IntelliSense on Vim was not straight-forward, and I knew that without good IntelliSense, my productivity would go down drastically.

Then I found the Vim plugin coc.nvim, my opinion about Vim started to change.coc.nvim claims to make Vim as smart as VSCode, and it does!

Let’s install the plugin first.

Plug 'neoclide/coc.nvim'

Then go to it’s Github repository and copy the example configuration and paste it in your .vimrc. The example configuration worked just fine for me.

Now you will start seeing IntelliSense like this. It also does linting and adds missing imports for you. Awesome!

typescript intellisense in vim

File Explorer using NerdTree

To get a File tree similar to that in VSCode, we will use the widely used NerdTree plugin.

Plug 'preservim/nerdtree'

Open NerdTree by Default
I prefer to open the file explorer when Vim opens. If you prefer the same, add the following line of code to .vimrc.

autocmd VimEnter * NERDTree

Focus Editor
If you added the code to auto-open NerdTree, then NerdTree will get focused on opening Vim. To fix that and set focus on the editor by default, add the following line of code to .vimrc.

autocmd VimEnter * wincmd p

AutoClose NerdTree
When the last file on the buffer is closed, it will leave the NerdTree open. To quit, we need to issue another :q command. Instead, we can close NerdTree when the last file is closed. To do that, add the following line of code to .vimrc.

autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif

Git Integration for NerdTree

VSCode indicates modified and staged files in File Explorer. To get a similar feature in Vim, we will install a plugin called nerdtree-git-plugin.

Plug 'Xuyuanp/nerdtree-git-plugin'

Now, when a file is changed or deleted or added, it will be highlighted in the NerdTree.

git integration for nerdtree

Similarly, it will also highlight staged, renamed, untracked, submerged, deleted, dirty, clean, and ignored files. The symbols used for indicating these can be configured in .vimrc.

let g:NERDTreeIndicatorMapCustom = {
    \ "Modified"  : "✹",
    \ "Staged"    : "✚",
    \ "Untracked" : "✭",
    \ "Renamed"   : "➜",
    \ "Unmerged"  : "═",
    \ "Deleted"   : "✖",
    \ "Dirty"     : "✗",
    \ "Clean"     : "✔︎",
    \ 'Ignored'   : '☒',
    \ "Unknown"   : "?"
    \ }

Git Gutter

VSCode shows uncommitted changes on a gutter. We can get similar functionality using the plugin vim-gitgutter.

Plug 'airblade/vim-gitgutter'

It can be customized to match the signs used by nerdtree-git-plugin.

let g:gitgutter_sign_added = '✚'
let g:gitgutter_sign_modified = '✹'
let g:gitgutter_sign_removed = '-'
let g:gitgutter_sign_removed_first_line = '-'
let g:gitgutter_sign_modified_removed = '-'
git gutter in vim

It can do more than merely adding signs to indicate added, modified, and removed lines. For example, it allows us to stage or undo a block of change inside a file. You can check out all the features here.

Here is my configuration for Git Gutter.

set signcolumn=yes

nmap ]h <Plug>(GitGutterNextHunk) "same as default
nmap [h <Plug>(GitGutterPrevHunk) "same as default

nmap ghs <Plug>(GitGutterStageHunk)
nmap ghu <Plug>(GitGutterUndoHunk)

let g:gitgutter_sign_added = '✚'
let g:gitgutter_sign_modified = '✹'
let g:gitgutter_sign_removed = '-'
let g:gitgutter_sign_removed_first_line = '-'
let g:gitgutter_sign_modified_removed = '-'

Status Bar using Airline

Next, we will install a plugin called vim-airline to get a status bar that shows current file information like line number, errors, warnings, file type, and even Git branch name.

Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'

Next, we will configure vim-airline to use the powerline font.

let g:airline_powerline_fonts = 1

If you wish to see the current Git branch name, it requires another plugin called vim-fugitive.

Plug 'tpope/vim-fugitive'

vim-fugitive provides more features. You can check them here.

Finally, you should get a status bar that looks like this.

status bar for vim using vim-airline

Fuzzy File Search

Fuzzy file search is something that I liked very much in IDEs like VSCode and Intellij. A Vim Plugin ctrlp provides a similar feature for Vim.

Plug 'ctrlpvim/ctrlp.vim'

Now, when you hit Ctrl + p you should be able to perform a fuzzy file search.

Once you have found the file, it can be opened in a horizontal split by pressing ctrl + x or in a vertical split by pressing ctrl + v. Learn more here.

Other Plugins to Try

  1. Multiple Cursorshttps://github.com/terryma/vim-multiple-cursors
  2. Colorized Bracketshttps://github.com/frazrepo/vim-rainbow
  3. Code Commenterhttps://github.com/preservim/nerdcommenter

What’s Next?

If you have finished setting up Vim to your liking, the next step is to learn the shortcut keys that Vim provides. Here is a list of useful Vim shortcuts to get you started. 

Join our Newsletter

Get weekly updates on new content. No Spams whatsoever!

Written By
Praveen
Programmer | Tech Blogger | Multitasker | Learner Forever | Someone who believes knowledge grows by sharing | Looking forward to using spare time productively
See responses (1)

Weekly Newsletter


 

Get weekly updates on new content right in your Inbox!


We Respect your Privacy | No Spams whatsoever!