A guide to getting started with Vim

What we'll cover

reading time: approx. 26mins

Introduction

So, what editor do you use for programming?

In case you're wondering, here is the list of editors I've tried at one point or another…

…and that's not including some of the real random editors that have cropped up over the years.

It seems popular editors nowadays are becoming more minimalist (oxymoron?)

The UI appears to be reducing in favour of keyboard short-cuts, with the intention of improving developer productivity.

One example of this is the use of a 'fuzzy keyword search'. The principle idea being that you press a short-cut key and you're presented with a field where you can type whatever you like and the editor will attempt to list out a group of files that match (in some way) what you've typed.

The reason this is a good thing is that it makes finding and opening files a lot quicker.

Imagine you don't know where a file lives (easily done in a cross team environment where other devs are working on code for a feature you're not). Fuzzy file searching makes life a lot easier.

Even if you do know where a file lives, fuzzy file searching is still quicker than reaching for your mouse, moving over to the file system and clicking on folders until you find the file and then double click to open it.

A lot of editors have a feature like this nowadays (Sublime Text is one such popular example).

The problem is that most editors don't normally have a long shelf life (none that any serious developer would consider using nowadays -> I'm looking at Dreamweaver here**).

**yes I'm sure they'll be some people who still use Dreamweaver and will not like that sentence, but I think it's safe to say that the developer community has grown up considerably since those early Macromedia days and developers have long since moved away to other more advanced and efficient development environments.

For example, the current hotness (as of 2013) is to use Sublime Text (a nice editor with good keyboard based features but also allows users to interact with it using a mouse). But what happens when Sublime Text stops getting updates (TextMate? Don't think it can't happen), or gets bought out by a competitor and then is dumped (this happens all the time in the software industry)?

Where do developers go next? Typically developers find another editor.

Here comes the old man

Well, there is an editor that has been around for a very long time and is available everywhere (and in most cases is installed by default) but also has tons of plug-ins and is pretty much the Perl of keyboard short-cuts.

That editor is VI (well, as you'll see, more specifically Vim) and it was originally created back in 1976!

Since then there has been improvements to the editor which nowadays (~1981 onwards) is more commonly known as Vim (meaning: VI Improved) and you can find more information on Vim at its website http://www.vim.org/.

The focus of this post

OK, so the problem with Vim is that although it's a great program to use, it unfortunately has a very steep learning curve which puts off new comers.

Also, Vim by itself isn't as useful (as a development environment) without a few plug-ins that help give it a bit of jazz. That also trips up new comers to Vim as they assume what they see other developers using is just Vim but it's not. Vim by itself is very nondescript, it's the plug-ins and custom Vim configurations that make all the difference to the look and feel of Vim.

So, the key to using Vim (for the first time) as a developer tool is:

I want to get the primary tools set-up first, and to show you those BEFORE we get ourselves bogged down with Vim commands.

Step 1: Installation

I'm not going to cover the installation of Vim because chances are it's already installed! Also, I'm running a Mac and so this tutorial is aimed at that environment (i.e. your mileage may vary otherwise if you're on Windows or a non Unix system).

Updating your Vim version?

If you decide you want to update your version of Vim (which when using a Mac is probably something you'll want to do as the included version is quite old).

You can do this by installing the latest version of Vim using Homebrew: brew install vim.

The problem you'll likely hit is that the Mac will still be using the original version of Vim.

Run which vim to see where the system is looking for Vim and if it's not running from a local user directory then you'll know it's not using the Homebrew install version.

So go to that directory specified by which vim and then rename the Vim folder (e.g. VimVersionXXXX) and then run which vim again and you should find that your system tries looking elsewhere for Vim and it will find the Homebrew install.

Things we're going to install to go along with Vim

But here are the things we're going to install…

…now there are loads of plugins you could install but the above are the fundamental ones that you'll require (you might decide that's all you need, I'll leave it up to you to decide).

Zsh

To use Vim we'll need to use a terminal shell. So let's get that open now (if you're on a Mac you'll have a Terminal.app you can run).

The default terminal shell for the GNU operating system, Linux and Mac OS X is 'Bash' but we want to use 'Zsh' instead.

I won't delve into the reasons why but effectively Zsh is a more efficient shell and offers better features than Bash and in general is more enjoyable to use.

To see what shells are available on your system you can run the command cat /etc/shells (hopefully you'll see /bin/zsh in the list).

To change shells run the command chsh -s /bin/zsh.

Terminal shells can be configured using (what's typically referred to as) a 'dot file'. These are files that are prefixed with a period character and so are hidden from standard users.

To see the hidden files in a directory just run the command ls -la and you should see a whole host of hidden dot files and folders.

For Zsh there should be a .zshrc file in your home directory (if there isn't then create one, as we'll need it shortly). You can do this very simply using the command touch .zshrc.

As we'll be using Vim there should also be in the home directory a .vimrc file for configuring Vim. If there isn't then create one (again, we'll be needing it shortly).

Pure Zsh

Now that we have Zsh running let's make it look a bit nicer by using 'Pure Zsh'. I'm going to let the author have the pleasure of describing it…

Most prompts are cluttered, ugly and slow. I wanted something visually pleasing that stayed out of my way. Pretty, minimal and fast.

So let's get it installed. Go to https://github.com/sindresorhus/pure and download the file pure.zsh to your home directory (or wherever you want, just remember where you save it).

You can import the pure.zsh file by adding the following line into the .zshrc file: . /path/to/pure.zsh

TMUX

So what is tmux? The authors definition is…

It lets you switch easily between several programs in one terminal, detach them (they keep running in the background) and reattach them to a different terminal. And do a lot more.

OK, so in short tmux makes it easy for you to create new terminal windows with panes and complex layouts (stuff you can do with raw Vim but tmux makes easier).

There are a couple of ways to install TMUX the easiest is with Homebrew: brew install tmux

Once you have tmux installed you can start it by simply running the command tmux in your terminal.

You may wonder if anything has actually happened because tmux doesn't look any different from what your normal terminal shell looks like, but what you don't realise is that you now have quite a few new keyboard shortcuts you can use to split your terminal into 'panes', 'windows' or 'tabs'.

Prefix?

In tmux whenever you want to run a command you first run a opening command called 'the prefix'. The prefix is typically Ctrl+b (i.e. press the Ctrl button and then the b key).

In my case I've updated the prefix to be Ctrl+a instead of Ctrl+b via a tmux.conf configuration file (you'll find out more about this file in the next section "tmuxinator").

Creating windows

To create a new window just run the prefix command and then press the c key (e.g. Ctrl+b then c)

To close a window either run exit or press Ctrl+d

Renaming windows

You can rename a window by running the prefix command and then pressing the , key.

Changing windows

You can move around your tmux windows using the prefix command and either n (for next) or p (for previous) or specifying a number that correlates with the window number.

Creating panes

To create a new horizontal pane run the prefix command and then press Shift+5 (the % key).

To create a new vertical pane run the prefix command and then press Shift+' (the " key).

Full screen a pane

At any time you can turn a pane into a full screen view (and back again) by running the prefix command followed by z. Run that again to toggle back to the pane view.

Move a pane into a different pane space

You can actually shift the panes around so that if a pane is in one position (let's say top left), you can move it to a different location (let's say bottom right) simply by running the prefix command followed by Shift+{, every time you press that combination all the panes will shift around.

Renaming a session

When you create a new tmux session (i.e. run tmux). You can opt to give it a name using tmux new -s session_name, but if you forget to do that and want to give the session a name later on (I do this all the time) then from within the session just run the prefix command followed by Shift+4 (which is the $ key) or alternatively run the prefix command followed by a : and then rename-session -t [current-name] [new-name] (if it has no current name then you'll just use the number assigned).

TMUXinator

We're now going to set-up a tool associated with tmux called 'tmuxinator' and this will help us manage complex tmux sessions.

Basically, rather than you (every day) opening up the terminal and manually creating the same set of panes and windows and opening files in tmux, we can just store these preferences as a template. We do this by creating a text file that holds this configuration information.

First thing to do is to install TMUXinator.

Sorry, but we need more technologies and this time it's Ruby.

To install it we need to run the command gem install tmuxinator.

Once installed we can create a new instance by running the command tmuxinator new [project]. You can call your project whatever you like (I went with tmuxinator new work).

Running this command is going to create a dot file .tmux.conf and also a dot folder called .tmuxinator which holds a project.yml (where the name of the file matches the name of the project, so for me it created a work.yml file).

If you open the yaml file you'll see it has a basic example set-up ready for you to configure…

name: test-project
root: ~/Code/news/workspace/

windows:
  - editor:
      layout: main-vertical
      panes:
        - vim
        - git status
        - cd path/to/my/cheatsheet && vim cheat-sheet.txt
  - sandbox: vagrant ssh
  - sass: grunt watch:service:news

…above is an example of my work.yml.

You can see I specify that I want to have three tabs created:

Within the first tab editor I have a specific layout used called main-vertical (tmux comes with many different pre-built layouts, this is just one of them).

The layout I'm using splits the screen into two columns. In the left column I have vim running and in the right column I have two rows. The top row checks the status of my git repository, and the bottom row opens up a Vim cheat sheet.

In the second tab sandbox I've told tmux I want to connect to our local development sandbox (via ssh).

In the third tab sass I've told tmux I want to run a task that watches our Sass development files for any changes (and then compiles the files when a change is detected).

Starting tmuxinator

Now we have a template set-up, to use it we just run tmuxinator start project (or in my case tmuxinator start work).

Closing tmux

Chances are you'll just leave the tmux session open, but if you want a quick way to detach from the tmux session (but leave the session open in the background so you can come back to it) then just run Ctrl+a d

You can see what tmux sessions are still open by running tmux ls which will show a number and a associated session.

You can re-attach to an existing session by running tmux attach -t {number|name} where {number|name} is either the number or the name of the session.

If there is only one session then you can just run tmux attach.

To totally kill a session just run tmux kill-session -t {number|name}.

Vundle

This is a plug-in manager for Vim.

To install Vundle run git clone https://github.com/gmarik/ vundle.git ~/.vim/bundle/vundle

Now you have it installed, you can add plug-ins to your .vimrc configuration file and install them by running a :BundleInstall command from within Vim.

You can also just run vim +BundleInstall from the command line.

Set-up some bundles

We're jumping ahead a little bit (because at the end of this section you'll see we'll be using Vim to type one command, but it's OK we won't do any more than that until later).

Let's open our .vimrc file and add some plug-ins we're going to need (code comments start with ")…

set rtp+=$HOME/.vim/bundle/vundle
call vundle#rc()
Bundle 'gmarik/vundle'
filetype plugin indent on

" ALL OF THE ABOVE IS ALSO REQUIRED
" FOR SUCCESSFUL VUNDLE INSTALL
" THE FOLLOWING IS NEW FOR US…

Bundle 'kien/ctrlp.vim'
Bundle 'vim-scripts/The-NERD-tree'

…so you may have noticed we've specified two plug-ins:

  1. NERDTree
  2. Ctrl+p

If you check the Vundle README on GitHub you'll see there are multiple ways to specify a 'bundle', in our case we're installing two bundles that are available on GitHub so you'll notice that the paths specified are actually the GitHub username/repo-name.

To actually get these two bundles installed (using the Vundle plug-in) means we need to first open Vim so we can run the relevant install command.

So to open Vim literally just run: vim and then to run the install command press ESC (just to make sure you're in the right mode, don't worry we'll cover this later) then type :BundleInstall and press ENTER.

Where can I find bundles?

Bundles are just pointers to Vim scripts.

The two bundles we've pointed to are references to their GitHub repositories.

But you can also point to non-github repos, local git repos, or direct to Vim scripts. See the Vundle README for more information.

NERDTree

NERDTree is a tree explorer plugin for navigating the filesystem. This is the closest thing you're going to get to a standard editor feature.

We'll cover how to use it in the following Vim Basics section. Suffice to say, with the Ctrl+p plug-in we shouldn't need to use the NERDTree very often (but sometimes it can come in handy)

Ctrl+p

This is a fuzzy file finder so it makes it easy for you to locate files within your project by just typing a couple of characters of the files name.

Again, we'll cover how to use it in the following Vim Basics section.

Vim

So here we are! We made it to the part where we can actually use Vim! So let's get stuck in...

Vim Basics

Vim is all about not using the mouse, just the keyboard.

One of the first things to know about Vim are that it has 3 modes:

  1. NORMAL (you run the majority of your commands from this mode)
  2. INSERT (you spend the least amount of time in this mode)
  3. VISUAL (you select text in this mode)

To switch modes you first press the ESC key and then either i to go into INSERT mode and v to go into VISUAL mode. The act of pressing ESC automatically puts you into NORMAL mode.

Once you're in NORMAL or VISUAL mode, to actually run a command (let's say the command we want is d$, don't worry what that means for now) you first press : followed by d$.

Using Ctrl+p to do fuzzy file searching

Get ourselves into NORMAL mode by pressing ESC, followed by :, followed by CtrlP (note: for this particular plug-in, if you're already in NORMAL mode, you can just press the Ctrl and p keys together to trigger the fuzzy search to open, but to not confuse ourselves let's keep to the standard :some-command format).

Once the plug-in is open we can just start typing the name of the file we're looking for, and you'll see that it lists all the files it thinks matches what we're looking for.

Simply use the arrow keys to select the relevant file you want to open and press ENTER.

Updating Ctrl+P's list

If you have Vim open and you add a new file then the list that Ctrl+P uses (which is cached) will be out of date. To fix this, open Ctrl+P and then press F5 to refresh the list of files it can search for.

Using NERDTree to search our file system

When Vim is open and in NORMAL mode press : followed by NERDTreeToggle this will open NERDTree at the current location. You can then use your arrow keys to move up and down the file system and press ENTER to open folders. Once you find a file you want to open press ENTER once you're cursor is on the item of interest.

Command Structure

It's worth remembering that most commands follow the format: operator [number] motion (not all the time, but enough of the time - you'll soon get used to the order you do things).

What follows is a super short list of commands and what they do.

Cursor Movement

h : left
l : right
k : up
j : down

Note: you can use your arrow keys still, but it's considered best practice by the Vim community to get used to using the above keys rather than the arrow keys.

Page Movement

Rather than moving up and down a file line by line, we can instead just move up and down the file in sections.

Ctrl+u : move one page up
Ctrl+d : move one page down
Ctrl+b : move half page up
Ctrl+f : move half page down

Motions

With some commands we need to indicate what direction or motion we want to take.

e : move to the end of a word
w : move to the start of next word (use with a counter -> a counter meaning "a number")

Examples:

5e = move to the end of the 5th word in the sentence
5w = move to the start of the word after the 5th (so actually move to the start of the 6th word)

Operators

Here are some common operators available to use:

Deleting

You can select multiple lines and just press d to delete.

When selecting multiple lines for deletion (e.g. d5j) it is better to use d5d as it deletes the expected number of lines.

For example…

Line 1  
Line 2  
Line 3  
Line 4  
Line 5  
Line 6  
Line 7  
Line 8  
Line 9  
Line 10

…if the cursor is on line 3 and you run d4j you'll end up deleting lines 3-7 but if you run d4d you'll delete 3-6 which visually is more likely what you intended (this is because j includes the current line on top of the specified number of lines to delete).

Deleting a tag

You can also delete a piece of text and its corresponding tag: dat which means to [d]elete [a]round [t]ag.

So if you had <div><p>Some text</p></div> and your cursor was inside the <p> then you could delete the paragraph as well as the text "Some text".

Search within a file

In NORMAL mode type a forward slash / followed by your search term.

e.g. /theThingImLookingFor -> this will automatically highlight any matches of the phrase theThingImLookingFor inside of the current file.

If you press the enter key the matches will stay highlighted and you can press n to navigate through each match (or Shift+n to move backwards through each match).

You'll notice that the search is case sensitive (which is annoying). To fix this you can put \c at the end of the search term to make the search case insensitive.

e.g. /tHEeThingIMLookingFor\c will still find theThingImLookingFor

You can add set smartcase and set ignorecase to your .vimrc file which can help also.

Also, if you press Shift+8 any where inside of a word then that word is selected and automatically searched within the document (note: Shift+3 does the same but searches backwards).

Search and Replace

You can search and replace within a file by first moving into NORMAL mode and then after pressing : and entering the following…

50,100s/search/replace/gc

…what this means is we limit the search range from line 50 up to line 100, we then look for the phrase search and we replace it with the phrase replace. We then use the g global flag which means don't stop after finding the first match. The c flag means don't just replace the instance, check with us first by asking us if we definitely want to carry out the replace.

You don't have to use the range numbers, you can just use: :%s/search/replace/gc (but notice, now we don't have the range we need to include a % at the start).

You can also use regular expressions which is awesome. But be aware that they don't quite match the standard regex syntax (you have to escape capture groups and word boundaries are no longer \b they are \< and \> +many other differences). BUT you can work around this by specifying a \v flag before the regex.

So for example, if you had the string foo.add('bar') then you could find it with something like…

:%s/\v(\.add\('.*'\))/\1/gc

…notice we're not having to escape the outer parenthesis which are capturing the entire match (you'll also notice this find and replace search doesn't actually do anything because we capture the entire match and then replace it with itself \1, but it gives you an example of how to use the 'Very Magic' mode).

Note: You can also do a site wide search and replace using the Ack plug-in (e.g. add Bundle 'mileszs/ack.vim' to our .vimrc file and run the :BundleInstall again). Checkout the Ack repo on GitHub to see how it works.

Viewing different buffers

Our .vimrc maps \y

map <leader>y :CtrlPBuffer<cr>

…so it shows us what the current buffer is (this allows us to jump between files within Vim).

Note: in Vim the <leader> key is a backslash \

Change list

Vim remembers all points where an edit was made when within INSERT mode and stores them in a 'change list'.

To view the change list run the command :changes. This will display a list of edits you made along with the number of its place in the list.

To access a specific change position run :changes n (where n is the number of the change position you're interested in). Moving to a previous change position doesn't undo the changes but instead just moves the cursor to that position. The reason why this is a good feature to have in Vim is because it allows you to jump around your file a lot more quickly and easily and can help to speed up your editing.

To sequentially move back and forth between the change list points use the commands:

g; - prev
g, - next

Jump list

Similar to the 'change list' feature, there is also a 'jump list' which allows you to move back and forth between all cursor positions.

You can view all cursor positions by running the command :jumps.

To move to a previous cursor position use ctrl-o and to move forward use ctrl-i.

Diff Tool

Vim comes with a built-in diff tool (useful for comparing the same file for changes).

Open two Vim windows in a split (so you see them both on screen at the same time).

Then within each window run the command :diffthis. You'll see any differences between the files highlighted for you along with their line number.

When you scroll the file then Vim will keep the scrolling in sync across both files.

To turn off the diff tool then run :diffoff in any one of the windows.

Code Comments

The following commands use the vim-commentary.git plugin…

gcc = comment out a line (or \\\)
gcu = uncomment the commented line (you can do gcc as a toggle)

When you select multiple lines to comment out you can just use gc (rather than gcc)

Syntax Formatting

You can set the formatting of a file using :setf

e.g. :setf cucumber (where cucumber is a syntax format installed)

Auto Indenting

You can use the auto indent feature = to help you while programming.

To indent the entire file you can use gg=G which breaks down to: gg move to the start of the file, = auto indent, G to the end of the file.

You can auto indent a single line: ==

You can auto indent a code block (while inside of it): =i{

You can auto indent a code block (while outside of it by first moving to either the opening or closing curly bracket): =%. Note: to move to the curly bracket keep pressing % (it'll move to either curly or parenthesis, which ever is first it'll stop there and then toggle between the opening/closing bracket, so you may need to manually navigation to the curly bracket and then run =%).

Run terminal commands within Vim

Running the prefix command and then typing :!{terminal command} allows you to run terminal commands from within Vim (e.g. :!pwd shows us the current working directory).

Note: doing this takes you out of Vim so you can see the results, but if you just press ENTER you'll be sent back into Vim.

Suspend Vim

Another way to run terminal commands while Vim is running is to actually suspend Vim.

If you run the prefix command this will take us back to the terminal to run whatever commands we like and then in the terminal just type fg to bring Vim back to the (f)ore (g)round.

Visual Block Mode

Ctrl+v puts us into Visual Block mode which allows us to select single columns and make multiple changes. So for example if you have a long list of items such as…

_List Item 1  
_List Item 2  
_List Item 3  
_List Item 4  
_List Item 5

…if you wanted to remove the opening _ underscore then you could enter Visual Block mode, select the underscores by using the direction keys (make sure you're on the first or last underscore when you enter Visual Block mode) and then after all are selected just press d to delete them.

Note: you might find you have an issue with editing multiple lines using insert mode. To use insert mode inside of Visual Block mode is to use Shift+i to jump into insert mode (just typing i doesn't work as that would throw you into the standard INSERT mode, so it'll remove you from Visual Mode).

Also you can press c to change multiple lines, but remember that your change only appears to have been made to one line until you escape Visual Mode, then Vim will kick in and apply the change to all other selected lines.

Vim Windows

As well as having panes and windows within tmux you can create Windows within Vim (this is useful for times when you just want to do some quick hacking and tmux is too much effort -> if you could believe such a thing).

To create a new window in Vim (which is the same concept as a 'pane' in tmux) you can either Ctrl-s to create a horizontal split screen (or run the command :split, or just :sp). You can also create a vertical split screen using Ctrl-v (or run the command :vsplit, or just :vsp).

Note: if you use the execute command (i.e. : variation) then you can specify a file's path to be opened, otherwise Vim will automatically open the window pointing to a new buffer that is the same as the currently opened file (useful for viewing different portions of the same, but very long, file).

You can create as many windows as you like (e.g. windows within a window).

To resize a window's height you can use Ctrl-w then - or +. You can also use the command :resize -N or :resize +N (where N is the number to move by).

To resize a window's width you can use Ctrl-w then < or >. You can also use the command :vertical resize -N or :vertical resize +N (where N is the number to move by).

To maximise the height of the window then use Ctrl-w then _.

To maximise the width of the window then use Ctrl-w then |.

Finally, to close all windows use :only (which closes all the windows except the current one, where by you can just run :q)

Repeating Yourself

Vim is designed to help you be as efficient as possible whilst editing so here is a little tip...

If you need to repeat an edit you just made within INSERT mode then use the . command.

For example, imagine you have the text "this is text" and you wanted to have the first letter of each word capitalised.

You could first move to the start of the line 0 and then use the 'toggle casing' command ~ and then run the command w. twice which means you would: (w) move the cursor to the next word and then (.) repeat the last edit.

Making life easier (changing case)

Now imagine you have the word "THIS" and you wanted to only have the first letter of each word capitalised.

Rather than manually rewrite each word, move your cursor to the start of the line and run lve~.

That will (l) move the cursor to the right, (v) select (e) to the end of the word and then (~) switch that selection's casing (so in this instance it'll change to lowercase).

Whenever you need to make repetitive changes try and think of how you can best utilise Vim to your advantage.

Keep to the basics

The above commands quite literally do not even scratch the surface of what's available within Vim.

So the best thing to do is to find a comfortable set of commands from the list above and don't deviate from them until you've got them memorised (it's ok to Google for something you don't know, but try to just focus on the basic commands for now).

Vim Configuration

Let's now take a quick look at some configuration options we can add to our .vimrc file…

" switch syntax highlighting on, when the terminal has colors
syntax on

" use vim, not vi api
set nocompatible

" no backup files
set nobackup

" no write backup
set nowritebackup

" no swap file
set noswapfile

" command history
set history=100

" always show cursor
set ruler

" show incomplete commands
set showcmd

" incremental searching
set incsearch

" highlight search
set hlsearch

" ignore case in search
set smartcase

" clear search buffer
:nnoremap § :nohlsearch<cr>

" make sure undo history is kept for files in buffer.
set hidden

" turn indentation on
filetype indent on

" enable filetype plugins
filetype plugin on

" disable folding because it is evil
set nofoldenable

" turn word wrap off
set nowrap

" scroll with more context
set scrolloff=10

" allow backspace to delete end of line, indent and start of line characters
set backspace=indent,eol,start

" convert tabs to spaces
set expandtab

" set tab size
set tabstop=4

" the number of spaces inserted for a tab
set shiftwidth=4

" turn on line numbers
set number

" highlight tailing whitespace
set list listchars=tab:\ \ ,trail:·

" get rid of the delay when pressing O (for example)
" http://stackoverflow.com/questions/2158516/vim-delay-before-o-opens-a-new-line
set timeout timeoutlen=1000 ttimeoutlen=100

" always show status bar
set laststatus=2

" set the status line to something useful
set statusline=%f\ %=L:%l/%L\ %c\ (%p%%)

" hide the toolbar
set guioptions-=T

" utf encoding
set encoding=utf-8

" autoload files that have changed outside of vim
set autoread

" jump to last cursor
autocmd BufReadPost *
  \ if line("'\"") > 0 && line("'\"") <= line("$") |
  \   exe "normal g`\"" |
  \ endif

" set-up ctrlp to include hidden files in its search
let g:ctrlp_show_hidden=1

" disable ctrlp's feature where it tries to intelligently work out the current working directory to search within
let g:ctrlp_working_path_mode=0

" don't let ctrlp take over the screen!
let g:ctrlp_max_height=30

" lets make sure we don't show these files
set wildignore+=*/.git/*,*/.hg/*,*/.svn/*.,*/.DS_Store

" allows us to more easily work with markdown files
Bundle 'tpope/vim-markdown'

" allows us to comment/uncomment lines and content
Bundle 'tpope/vim-commentary.git'

" remove whitespace on save
autocmd BufWritePre * :%s/\s\+$//e

…hopefully the comments are self explanatory. There is so much you can configure with Vim that you just need to take the time to look at what set-up works for you, as chances are you'll be able to change it.

You can find loads of Vim configurations on GitHub where you can pinch ideas and settings from.

Other plugins

Here are some other really useful plugins worth your time investigating…

Conclusion

So there you have it. A painfully short introduction to using Vim as your new web development environment. But hopefully enough to get you started.

Vim is so powerful that it would probably take a life time to really cover everything. It just takes dedication.

Vote on HN