My Vim Setup for Javascript Development

Working on a PR for Firefox Dev Tools, Capetown, Western Cape
The .vimrc file for the above image is at the bottom of the post as well as the reference links used

Fun fact: it’s been less than a week since I started using Vim well … again.

Introduction to Vi & Vim
Back when I was in University between the years of 2009 and 2012, I primarily used Vim for all sorts of text editing including taking notes and doing programming assignments. The reason for this is actually quite simple joining University I only had a desktop workstation and my lovely father decided the best thing he could get me for school was and Atom Acer NC10 notebook preloaded with Windows.

Well long story short within the first week of school and having to install an IDE so I could work on the C++ and C classes my notebook started hanging so bad that I felt as though I didn’t have a laptop while in school and in a few days I realized I could probably remedy this by running a lighter OS and IDE this landed me squarely in Ubuntu Karmic Koala plus Vim for my default editor.

Slowly my work station at home too was converted to the same set up as I learnt the nuances of Ubuntu and Open Source Software!

In comes the MacBooks

Well fast forward a few years later and I start landing programming gigs and all was going Kosher until I got my first MacBook … Wow! The thing worked and worked well! I still used Vim occasionally but now I had more computing power, Woohoo I could run more than a text editor. Somewhere along the way, I got introduced to Android development and the defacto standard was to use Eclipse then … sweet days!

Slowly Vi and Vim waned from my life IDEs were the business they did things, they compiled stuff, they told me if I typed an error …

Along the way, I met Alan Orth and Idd Salim I don’t really remember which one of them it was that convinced me it wasn’t worth using Mac if you aren’t Mac using software and I was sold for the next few years I only used vim when tunnelling into remote servers or when I was using a machine I was unfamiliar with or when trying to impress people :)

It’s almost a decade later, I pretty much only use Vim when I tunnel into one of my $5 Linode instances, Quite a lot actually. 
For development on my MacBook, I use Atom or AndroidStudio and when the gods dictate Xcode.

For the past 4 years I have been working on web applications almost exclusively as you can imagine 90% of my editing has had to happen in Atom.

Here comes the trouble, Here comes the danger

A week or so ago using Atom 1.18.* my editor just started hanging and it did this every single time I tried to edit my code.

This was annoying well as you can imagine I was losing time and motivation!

Not good need work done, So me get paid …

I started looking for alternatives, you would not believe the number of times I was asked to use VSCode!!

Even Alan Orth suggested it. He uses Vim I know.

I figured if Atom hanged and through benchmarking its been shown to need fewer resources than VSCode, Then VSCode would hang too and likely more frequently.

Now What?
All along there was a tiny light editor that was always with me built for the same reasons I needed now, Low Latency and high responsivity.

Vi & Vim 
So now all I had to do was to set up Vim so I could use it as an editor when working on projects.

Here are the main pain points I am trying to fix
1. Fast — I need something fast and responsive
2. Composable as opposed to Extensible, I didnt need that many plugins or features I needed a few core ones that I could combine to do bigger actions 
3. A file explorer to see which directory I was in and what I was doing 
4. Ability to open more than 1 file at once.

Below is my .vimrc and how I went about setting it up

"set the with of tabstop to 4 spaces
set tabstop=4
"make indentation to correnspond to one tab
set shiftwidth=4
"Allow line numbers
set number
"Always display the status line
set laststatus=2
"Don't try to be compatible with Vi
set nocompatible
"Enable pathogen package manager on
execute pathogen#infect()
"Turn syntax highlighting on for programing
syntax on
"Detect file types
filetype plugin indent on
"Use utf-8 Encoding
set encoding=utf-8
"Choose theme for airline
let g:airline_theme='powerlineish'
"Choose icons for airline bar
let g:Powerline_symbols='unicode'
"Choose fonts for airline theme
let g:airline_powerline_fonts = 1
"Enable 256 colors
set t_Co=256
"Add warnings to status bar
set statusline+=%#warningmsg#
"Gice syntastic access to the status line
set statusline+=%{SyntasticStatuslineFlag()}
"Back to normal color
set statusline+=%*
"Always populate location list with errors
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
"check for errors on open ad on sabe exit
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
"Use eslint with syntastic
let g:syntastic_javascript_checkers = ['eslint']
"Disable airline tagbar for faster opening times
let g:airline#extensions#tagbar#enabled = 0
"Open Nerdtree automatically when vim starts up opining a directory
"I usually start working by navigating to the folder and typing [vim .]
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 1 && isdirectory(argv()[0]) && !exists("s:std_in") | exe 'NERDTree' argv()[0] | wincmd p | ene | endif
"Build Fuzzy Finder
"Search and autocomplete into subfolders
set path+=**
"Append to existing value of path
"the 2 stars tells vim to search Subdirectorties recursively in the folder vim is running
"Use Tab for auto completion
set wildmenu

Which editor do you use?

Did you like this post, please show your support by pressing the little green heart on the left!

Back to code 😝