Press "Enter" to skip to content

Learning Vim through Web-Development, A Top-Down Approach. Part 1: General Setup

For the past couple of years I’ve gone back and forth with the Vim editor. I’ve tried it out a few times only to be overwhelmed by the sheer number of plugins and configuration options and eventually falling back into my comfort zone of using a fully-featured IDE such as Intellij or Rubymine.

However, the following exchange between Sonia Gupta and  Brian P. Hogan inspired me to give it another try:

I wanted to feel empowered to make my editor do what I wanted it to do, as opposed to relying on 3rd party support for a particular language or framework that I wanted to work with. In addition, I’ve experienced some performance issues with Rubymine when working with large projects, and wanted to see if trying a less heavy weight editor would help alleviate some of that pain.

For this attempt, I decided to start with a bare bones installation and slowly pull in new plugins and configurations as needed. This series will document these experiences, with each part discussing a particular phase in the construction of my development environment.

General Setup

As mentioned above, I’ve played around with Vim in the past, starting with the Janus plugin, then moving on to my own custom configuration. I learned a lot with these tools, to the extent that using an editor that doesn’t offer some sort of vim keybinding support is excruciating (As shown in a previous post by my usage of the IdeaVim plugin in Rubymine). However, at this point my .vimrc file had a lot of cruft in it that was copy pasted from other .vimrc files on github, as well as a ton of plugins I probably don’t need (not yet anyway). So I’m essentially starting from scratch for this series.

Since I primarily use a fully-featured IDE like Rubymine or Intellij, there are a few basic features that I’ve grown accustomed to using that will provide the basis for the initial Vim configuration.

  • a file explorer
  • file search
  • recently opened files
  • global text searching
  • commenting

To start the general setup,  I needed a plugin manager. I decided to go with vim-plug based on the not so thorough investigation into the following reddit page:

Which plugin installer or "vim package manager" should I use? from vim

The very first plugin I installed was flazz/vim-colorschemes. No vim configuration is complete without a cool color scheme. Once this plugin was installed, I set the color scheme to brogrammer.

The next plugin I installed was scrooloose/nerdtree, which provides a file explorer for navigating through the local directory. Since I started my vim adventures using the Janus plugin, muscle memory demanded that I map :NERDTreeToggle to ‘n’:

noremap <silent> <Leader>n :NERDTreeToggle <Enter>

I also prefer having my file explorer on the right-side of the editor, so that it doesn’t cause the current file to jump left and right as I toggle in and out of it:

let g:NERDTreeWinPos = "right"

For file searching, i installed ctrlpvim/ctrlp.vim.

With this plugin, you simply type <ctrl-p> to bring up ‘file find mode’, And start typing the name of the file you are looking for. ctrlp.vim will provide you with a list of files that match the expression.

ctrlp.vim also supports searching most recent used (MRU) and current buffers, so this plugin takes care of both file search, and recently opened files.

The next plugin I installed was milezs/ack.vim for global text searching. In order to get this to work I had to install ack on my current system (macOS):

brew install ack

This plugin basically allows me to recursively search for a text string within the current directory:

:Ack brogrammer

This takes care the global text search requirement for the general vim setup.

The last plugin I installed was scrooloose/nerdcommenter. The need for this arose because I was using Vim to edit the .vimrc file, and wanted the ability to comment out blocks of text easily.

In addition to these plugins, I set the leader key to “‘” (since it was easier to reach than the default leader key “\”), and I included some configurations  for expanding the tab character  to two spaces.

My current .vimrc file is shown below:

let mapleader = "'"

" Plug config
call plug#begin('~/.vim/plugged')
Plug 'flazz/vim-colorschemes'
Plug 'scrooloose/nerdtree'
Plug 'scrooloose/nerdcommenter'
Plug 'ctrlpvim/ctrlp.vim'
Plug 'mileszs/ack.vim'
call plug#end()

" key mappings
noremap n :NERDTreeToggle

" General config
colorscheme brogrammer
set number
set expandtab
set tabstop=2
set shiftwidth=2

" Nerdtree config
let g:NERDTreeWinPos = "right"

On a final note, I’ve found Vim Awesome to be a great resource for searching for plugins to meet your specific needs. You can search plugins by category, and it provides information about when the plugin was last updated, giving you a good idea of how well maintained a plugin is.

This takes care of the general setup of my vim configuration. The next entry in this series will explore plugins for editing HTML and CSS.


Vim Awesome


Vim colorschemes

The NERDTree

NERD Commenter