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

Typescript

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

.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 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']
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?

  1. Install all dependencies
  2. Paste in .vimrc into ~/.vimrc
  3. Open VIM
  4. 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! :-)

--

--

--

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

React with TypeScript : Get Started

10 JavaScript concepts need to know for the interview

Create Beautiful Transactional Emails with the Feathers-Mailer Module

Recent Advances and Improvements to JavaScript Promises

JavaScript Code Styling Best Practices — Maximum Depth and Lines

How to Add Copy to Clipboard Feature to Your Vue.js App

Top React Libraries — JSON, Visibility, and Datetime

Make Form Handling Easy in React Apps with Formik — Checkboxes and Radio Buttons

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

Finally I started with typescript (node.js)

Code: Views-driven router paths, instead of a hardcoded mess — VueJS

Serverless JAMstack with NuxtJS, FaunaDB, GraphQL and Netlify

Stepwise Guide to Node.js Authentication with Express and Knex