Using VIM for React, Rails & Node development

5 min readApr 11, 2021

VIM is open source and free and works on any platform that you are going to do code on. Best of all it is very extendable, really fast and the configuration can be replicated anywhere using simple configfiles.

I like VIM and its power so much and the fact that I am always in my console is awesome. In this article I would like to share how I work with VIM and what plugins I use.

VIM is hard at first — see this Vim Exit% Speedrun that makes fun of how hard it is to quit VIM the first time you use it. ;-)

What does my setup work like?

Supports React, Typescript, Nodejs, Ruby on Rails
Autocompletes code
Lints code and shows errors
Quicksearch for files or content within files
Can run tests directly from within VIM
Easy comment in/out code
Quick save/close with shortcuts
Uses Nerdtree to have a directory/file list on the left
Integrates with OhMyZh

VIM Plugin Managers

VIM supports a major catalog of plugins/extensions that can be easity be installed. There is even multiple ways of installing plugins. I use vundle and Plug. To get started you need to install them.

$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Dependencies

Some of my VIM plugins require additional dependencies to work.

Search

To have search/grep for files and content you need fzf and ripgrep

$ brew install fzf
$ brew install ripgrep

Ruby

To have codehelp for ruby you need solargraph

$ gem install solargraph
$ solargraph download-core

Read more about solargraph

Typescript

To have codehelp for typescript you need tsserver (in your project)

$ npm install --save-dev ts-server

Read more about ts-server

Eslint and Prettier

To have linting and prettier on your projects you need to install them first, then later we can configure them

$ npm install --save-dev eslit prettier

.vimrc

The most easy way of porting configuration between vim installations is by using the .vimrc file. It is located in your home folder ~/.vimrc and VIM loads it automatically when it starts up.

Open ~/.vimrc and paste in the configugration below. I have made a comment for what each configuration does but you can also read about each plugin later on.

set nocompatible
filetype offset rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'
Plugin 'tpope/vim-sensible'
Plugin 'tpope/vim-rails'
Plugin 'tpope/vim-commentary'
Plugin 'vim-ruby/vim-ruby'
Plugin 'vim-test/vim-test'
Plugin 'slim-template/vim-slim.git'
Plugin 'maciakl/vim-neatstatus'
Plugin 'junegunn/fzf'
Plugin 'junegunn/fzf.vim'
call vundle#end()call plug#begin('~/.vim/plugged')
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'preservim/nerdtree'
Plug 'pangloss/vim-javascript'
Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'
Plug 'mhartington/oceanic-next'
call plug#end()" Backup files
set backupcopy=yesset expandtab    " Turn tab into spaces
set number       " Turn on numbering of lines
set showmatch    " Show matching brackets.
set matchtime=5  " Bracket blinking.
set noshowmode   " Shows vim mode" Set status line
set laststatus=2 " Always show status line." Match and search
set hlsearch    " highlight search
set ignorecase  " Do case in sensitive matching with
set smartcase   " be sensitive when there's a capital letter
set incsearch   " Search incrementally" Color scheme
set t_Co=256
set termguicolors
colorscheme OceanicNext" Set shell
set shell=/bin/zsh" Test shortcuts
nmap <silent> t<C-n> :TestNearest<CR>
nmap <silent> t<C-f> :TestFile<CR>
nmap <silent> t<C-s> :TestSuite<CR>
nmap <silent> t<C-l> :TestLast<CR>
nmap <silent> t<C-g> :TestVisit<CR>" Search shortcuts
nnoremap <silent> <C-z> :FZF<CR>
nnoremap <silent> <C-x> :Rg<CR>" Fast comment shortcuts
noremap \ :Commentary<CR>
autocmd FileType ruby setlocal commentstring=#\ %s" Save current buffer shortcuts
noremap  <silent> <C-w> :w<CR>
inoremap <silent> <C-w> <ESC>:w<CR>i" Close current buffer shortcuts
noremap  <silent> <C-a> :q<CR>
inoremap <silent> <C-a> <ESC>:q<CR>" Use ctrl+Left / Right to go between tabs
nnoremap <C-Left> :tabprevious<CR>
nnoremap <C-Right> :tabnext<CR>" Enable mouse
set mouse=a" Prev/next tab ctrl + left or right arrow (Remember to disable global mac os ctrl+ left or right key) 
map <C-Left> :tabprevious<CR>
map <C-Right> :tabnext<CR>" Enable NerdTree when opening VIM on empty file input
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif" Syntax highlight
autocmd BufEnter *.{js,jsx,ts,tsx} :syntax sync fromstart
autocmd BufLeave *.{js,jsx,ts,tsx} :syntax sync clear" Enable typescript server
let g:coc_global_extensions = [
  \ 'coc-tsserver'
  \ ]" If prettier is installed as node_module enable it
if isdirectory('./node_modules') && isdirectory('./node_modules/prettier')
  let g:coc_global_extensions += ['coc-prettier']
endif" If eslint is installed as node_moduel enable it
if isdirectory('./node_modules') && isdirectory('./node_modules/eslint')
  let g:coc_global_extensions += ['coc-eslint']
endif" Fix identitation on filetypes
autocmd FileType javascriptreact setlocal ts=4 sts=4 sw=4 expandtab
autocmd FileType typescriptreact setlocal ts=4 sts=4 sw=4 expandtab
autocmd FileType javascript setlocal ts=4 sts=4 sw=4 expandtab
autocmd FileType typescript setlocal ts=4 sts=4 sw=4 expandtab
autocmd FileType conf setlocal ts=4 sts=4 sw=4 expandtab
autocmd FileType json setlocal ts=4 sts=4 sw=4 expandtab

What Plugins is included?

The following is a list of all the plugins and a short description. The is tons of plugins but i like to keep it to what i use at least everyday.

VundleVim/Vundle.vim
Package manager VIM plugins

tpope/vim-sensible
A universal set of defaults that (hopefully) everyone can agree on.

tpope/vim-rails
This is a massive (in a good way)
Vim plugin for editing Ruby on Rails applicationst

pope/vim-commentary
Comment stuff out — aware of code language

vim-ruby/vim-ruby
This includes syntax highlighting, indentation, omnicompletion, and various useful tools and mappings

vim-test/vim-test
A Vim wrapper for running tests on different granularities

slim-template/vim-slim.git
Slim syntax highlighting for vim.

maciakl/vim-neatstatus
The aim of Neat Status is to provide neat, and simple UI with just basic information

junegunn/fzffzf
A general-purpose command-line fuzzy finder

junegunn/fzf.vim
Wrapper for the fzf plugin

neoclide/coc.nvim
Make your Vim/Neovim as smart as VSCode

preservim/nerdtree
The NERDTree is a file system explorer for the Vim editor

pangloss/vim-javascript
JavaScript bundle for vim, this bundle provides syntax highlighting and improved indentation

leafgarland/typescript-vim
Syntax file and other settings for TypeScript

peitalin/vim-jsx-typescript
Syntax highlighting and indentation for JSX in Typescript

mhartington/oceanic-next
Neovim theme inspired by Oceanic Next for Sublime

How to install?

Install all dependencies
Paste in .vimrc into ~/.vimrc
Open VIM
Run commands below

:PluginInstall
:PlugInstall
:CocInstall coc-solargraph coc-json coc-tsserver

Configuring Eslint / Prettier

Once you have installed all plugins into VIM you can open vim and run :CocConfig and then paste the following configuration

{
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.autoFixOnSave": true,
  "eslint.filetypes": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "tsserver.formatOnType": true,
  "coc.preferences.formatOnType": true,
  "prettier.disableSuccessMessage": true
 }

On next start you will have to give Coc access to show tips and you should be done

$ vim
:CocCommand eslint.showOutputChannel

Shortcuts

When everything is installed then the following shortcuts is available

ctrl+w
Writes current buffer (Saves file)

ctrl+a
Closes current buffer

ctrl+z
Quick search for a file within working directory

ctrl+x
Grep search for anything within working directory

shift+option+\
Comment out whatever you have selected/under curser

t+ctrl+n
In a test file runs the test nearest to the cursor, otherwise runs the last nearest test

t+ctrl+f
In a test file runs all tests in the current file, otherwise runs the last file tests

t+ctrl+s
Runs the whole test suite (if the current file is a test file, runs that framework’s test suite, otherwise determines the test framework from the last run test)

t+ctrl+l
Run last test

t+ctrl+g
Visits the test file from which you last run your tests

Feel free to drop me a line in the comments if you have any feedback, thanks for reading! :-)