Using VIM for React, Rails & Node development

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 ~/.vim/bundle/Vundle.vim
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs


Some of my VIM plugins require additional dependencies to work.


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

$ brew install fzf
$ brew install ripgrep


To have codehelp for ruby you need solargraph

$ gem install solargraph
$ solargraph download-core


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

$ npm install --save-dev 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


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 off
set 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=yes
set 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']
" If eslint is installed as node_moduel enable it
if isdirectory('./node_modules') && isdirectory('./node_modules/eslint')
let g:coc_global_extensions += ['coc-eslint']
" 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.

Package manager VIM plugins

A universal set of defaults that (hopefully) everyone can agree on.

This is a massive (in a good way)
Vim plugin for editing Ruby on Rails applicationst

Comment stuff out — aware of code language

This includes syntax highlighting, indentation, omnicompletion, and various useful tools and mappings

A Vim wrapper for running tests on different granularities

Slim syntax highlighting for vim.

The aim of Neat Status is to provide neat, and simple UI with just basic information

A general-purpose command-line fuzzy finder

Wrapper for the fzf plugin

Make your Vim/Neovim as smart as VSCode

The NERDTree is a file system explorer for the Vim editor

JavaScript bundle for vim, this bundle provides syntax highlighting and improved indentation

Syntax file and other settings for TypeScript

Syntax highlighting and indentation for JSX in Typescript

Neovim theme inspired by Oceanic Next for Sublime

How to install?

  1. Install all dependencies
  2. Paste in .vimrc into ~/.vimrc
  3. Open VIM
  4. Run commands below
: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": [
"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


When everything is installed then the following shortcuts is available

Writes current buffer (Saves file)

Closes current buffer

Quick search for a file within working directory

Grep search for anything within working directory

Comment out whatever you have selected/under curser

In a test file runs the test nearest to the cursor, otherwise runs the last nearest test

In a test file runs all tests in the current file, otherwise runs the last file tests

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)

Run last test

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! :-)




I work as a software developer with years of experience within the field of web, apps and server architecture.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

webpack By Example: Part 4

How To Set Dynamic Height At Element With Angular Directive 📐

Javascript snippet to generate the lyrics of the song “99 Bottles.”

Gatsby: Fetching Data at The Component Level with useStaticQuery

JavaScript Unit Test Best Practices — Test and Automation

Build an Online Shop with Vue And Laravel Part 8.1 - Implement Vuex

webpack By Example: Part 2

Prototyping with Vue.js and Bootstrap

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rasmus Styrk

Rasmus Styrk

I work as a software developer with years of experience within the field of web, apps and server architecture.

More from Medium

Tasker, React/Redux + Rails API Final Project

CORS Error Solved — Deploy a Proxy on Vercel

Why You Want to Choose Next.js for Your Next Projects in 2022

Magento an Adobe Commerce Reactive ReactJS Programming