Aston J

Vim for Ruby on Rails (and a sexy theme!)

Posted on: June 28th, 2012 by AstonJ 56 Comments

This post started off as a small guide mainly for my own reference, but it’s grown into a good overview of why Vim is so great for Rails development – if you’re unconvinced, just read through the killer commands listed below… you’ll soon see how Vim could make life a lot easier for you – and I’m only scratching the surface here!

Basic install

First up, install MacVim (or Vim for your platform)

Then install the Janus: Vim Distribution which is the defacto Rails Vim distro.

Adding the CodeSchool theme

Although Janus comes with plenty of themes, I prefer my old TextMate theme (which I created to mimic the CodeSchool theme used in their Rails Best Practises course) …it’s just so easy on the eye, and going by my stats, quite popular.

You can see what a full page looks like by clicking here (Note: I have since added a slight background to the line numbers as I feel that makes it easier to see indentation levels).

Download the theme from here, unzip it and place the codeschool.vim file in ~/.vim/colors

Then, open ~/.gvimrc.afterand inside that paste (and save):

color codeschool
set guifont=Monaco:h12
let g:NERDTreeWinPos = "right"
set guioptions-=T " Removes top toolbar
set guioptions-=r " Removes right hand scroll bar
set go-=L " Removes left hand scroll bar
autocmd User Rails let b:surround_{char2nr('-')} = "<% \r %>" " displays <% %> correctly
:set cpoptions+=$ " puts a $ marker for the end of words/lines in cw/c$ commands

To add some breathing space at the top, in terminal type:
defaults write org.vim.MacVim MMTextInsetTop ‘5’

Ok that’s the theme sorted. You might have noticed I moved the NERDTree to the right hand side, which is where I prefer it – if you prefer the left omit that line.

Some basics

First, pick up the basics by going to your command line and typing vimtutor (and enter). It’s a really good, albeit short, introduction. Then (for those of us coming from tab-based editors) here’s a few tips you might find handy:

CTRL Ww moves you from window to window (i.e nerdtree to window and vice versa)
CTRL WT moves current window into a tab

t (While in nerdtree) opens the file in a tab.

gt Goes to next tab.

gT Goes to previous tab.

\n Toggles the NerdTree on or off.

Command T Similar to TextMate’s find in project. Try to navigate by directory rather than file name. While there CTRL T opens in a tab, or Escape closes it.

df [character] deletes to character, eg df_ will delete to the next underscore

I just want to add that although the above covers tabs, tab’s are one thing you will probably use quite differently in Vim… Vim has a really awesome package of buffers + tabs + split windows – which will probably mean a different, more flexible and pleasant workflow :) I might do a blog post about it later (stay tuned!) but for now just be prepared to move away from endless tabs – if that’s what you were used to before.

Here are are the erb tags:

CTRL S = <%= %> erb tags
CTRL S - <% -%> erb tags
CTRL S # <%# %> erb tags

Some killer commands

Here is the first batch of killer commands I have found – do you know more? Please let me know and I’ll add them! Most of these come courtesy of Tim Pope and his rails.vim plug-in (which is installed with Janus).

:Rmodel dog you can replace ‘model’ with controller or view (or helper, test, etc) and then enter the name of the controller or view you want. Pretty awesome huh?

:Rmodel will take you to the associated Model depending on which file you are in. Also works with: :Rcontroller :Renvironment :Rfixtures :Rhelper :Rjavascript :Rlayout :Rlib :Rmailer :Rmigration :Rmodel :Robserver :Rtask :Rview :Rspec

:Rfind file-name will take you to the file directly.

:Rgenerate (options) same as rails g in terminal.

:A goes to the alternate file (eg the associated test file)
:AS same as above, but in split
:AV same as above, but in vertical split

:R goes to the related file, so if the cursor is on the ‘show’ method of a controller – it will take you to the show view.
:RS same as above, but in split
:RV same as above, but in vertical split

gf – go to related file depending on where your cursor is (see :R above)
CTRL Wgf same as above but in a new tab
CTRL Wf same as above but in new split window.

:Rake task-name runs the rake task

There are lots more – check out the Rails.vim link below for them all.

:NERDTreeFind will show you the location of the file you are in, inside NERDTree (and open NERDTree if it is not open). Thanks to Rafał for that tip!

While in NERDTree, press m for menu – then you can add/delete/rename etc Thanks to Les for that tip!

Command-Shift-F find in project (though you need ‘Ack’ for this to work – on Mac, install with brew install ack) Thanks to Chris for this tip!

:sp splits your screen (can be used multiple times)

:vsp splits your screen as above – but vertically.

Be sure to check out the ‘Learning Vim’ link below – there, I post tips on how you can master the basics of Vim, easily and quickly.

Further reading

Daniel Fishcher’s TextMate to Vim post

Thoughtbot’s Intro to Rails Vim video

Rails.vim awesome command list

Learning Vim (by me)

Well that’s it for now, I hope this post has shown you not only how to set up Vim, but a few of the basic commands as well as some of the killer features that makes Vim so great for Rails development. I hope you’ll have as much fun with it as I think I will!

Tags: , ,
  • Rafał Lisowski

    Link to full page not work. Anyway thanks for sharing, I will try NERDTree on the right side :)

    • AstonJ

      Hi Rafał, I have fixed the link ;)

    • aqeeliz

      Agreed, NERDTree on right side is a great idea, that should make me use it more now.

  • Rafał Lisowski

    :NERDTreeFind shows current file in NERDTree. I find that command as very handy.

    • AstonJ

      Nice one! Have added it :) and a few more, as well as the link to the full command list for rails.vim – it’s HUGE! No wonder Vim is so popular in the Rails world.

  • http://excid3.com Chris Oliver

    With Ctrl-P builtin to Janus, I don’t even use NERDTree hardly ever these days.

    I’ve also made a few tweaks to Janus myself, such as coloring the status line based upon your mode and automatically strip trailing whitespace.

    • http://excid3.com Chris Oliver
    • AstonJ

      I use the Apple-T variant (of Ctrl-P) as I’m so used to it from TextMate – but yeah, the more I use things like :Rmodel and family, I am finding I need NERDTree less and less. I still screw up a bit on remembering which mode I’m in – but I’m getting there!

      Can you think of any other killer commands that I might have missed? I think I have most of the important ones.

      Thanks for the link to your gvimrc file – I will have to give some of them a go!

      • http://excid3.com Chris Oliver

        Ctrl-P is bound to Command-T on OSX. It’s just the name of the plugin.

        Fugitive (things like :GBlame) are very useful when you’re using Git especially with other people.

        Doing a project wide search is always helpful by using Ack. (Command-Shift-F) This is already setup by default in latest Janus. I was using the old version before and had to map it manually myself.

        • AstonJ

          Awesome thanks – added find in project too – definitely a handy one!

      • Rafał Lisowski

        There is a lot of nice vimrc files, thats mine https://github.com/korin/dotfiles/blob/master/.vimrc some of my configs may not work on macvim since is use gvim ;)

  • Sander

    Small error, the line:

    Then, open ~/.vim/.vimrc.after ..

    Should be:

    Then, open ~/.vimrc.after

    Otherwise, thanks for this article!

    • AstonJ

      Oops – fixed now! Thanks for letting me know :)

  • http://www.polarblau.com polarblau

    Thanks a alot! Very handy compilation.

  • http://www.polarblau.com polarblau

    Thanks a lot! Very handy compilation.

  • http://sygendev.wordpress.com Tor

    fast alternative for command-t is ctrlp: https://github.com/kien/ctrlp.vim/

    I am using a vim suite from
    https://github.com/astrails/dotvim
    that contains very cool bundles

  • http://metalelf0.github.com Andrea Schiavini

    I usually add this to my .vimrc:

    ” \\ toggles NERDTree
    map :NERDTreeToggle

    ” H to go to beginning of line
    noremap H ^

    ” L to go to end of line
    noremap L $

    ” :w!! saves a file as root
    cmap w!! w !sudo tee % >/dev/null

    I collected these around the web, so if the author of any of these is reading here – THANKS a lot! ;)

    • http://metalelf0.github.com Andrea Schiavini

      It was like this, but without spaces (sorry!)
      ” \\ toggles NERDTree
      map :NERDTreeToggle

      • http://metalelf0.github.com Andrea Schiavini

        Try again:
        map (Leader)(Leader) :NERDTreeToggle(CR)

        And substitute braces with > and <. Sorry ;)

    • Rafał Lisowski

      I don’t like remap H and L, they are useful:
      H – go to top of the screen
      M – middle of the screen
      L – end of the screen

      but I like :w!! a lot, thanks!

    • AstonJ

      Thanks for sharing Andrea!

  • Blake

    You should put that theme up on Github so those of us who use Vundle of Pathogen with submodules can get it and update it without hassle.

    • AstonJ

      Hi Blake – I plan to submit the theme to vim.org, I was just waiting for the all clear from CodeSchool as I didn’t want to use their name if they weren’t happy with it. Will try to get it done soon!

  • http://www.danielfischer.com Daniel Fischer

    Great guide. Funny to see my guide in the links. Thanks!

    I found some cool tips with the alternate file stuff. Share some more tips! I’d love to see some buffer stuff I’m missing out on.

    • AstonJ

      Hey Daniel – I thought your blog post was great – your enthusiasm helped affirm the switch :D

      Re other tips, check out my ‘Learning Vim’ post, it includes info about buffers (although you’ll want to watch Derek’s screencasts as well – as he shows them in more detail).

      I’ll try to add more Vim tips as and when I learn more :)

  • Pingback: This Week’s Ruby News: Ruby 1.8.7-p370, Rubyist Text Editor Poll Results, MagicRuby and More

  • Diego

    This theme doesn’t work very well on a Linux terminal emulator with ‘xterm-256color’, or ‘konsole-256color’ or ‘screen-256color’. The background color for example shows as blue in certain situations. Please fix this.

    • AstonJ

      I’ll look into that, thanks for letting me know Diego.

    • David

      I concur, this “blue” background is somewhat annoying for an otherwise great looking theme.

      • David

        I should note, I’m using iTerm2 on OSX Lioin

  • http://adityasanghi.com Aditya Sanghi

    You might want to consider blurring out your background by at least 75%. It’s way to distracting when trying to read code. Or even a little javascript to remove it if the user would like to. :) Just a suggestion! :)

    • AstonJ

      Thanks for the feedback Aditya. The background is already a lighter shade… can you let me know what monitor/set-up you are viewing the site on please?

      • http://adityasanghi.com Aditya Sanghi

        I’m on a 27″ iMac running at max resolution it allows. 2560×1440 although my chrome window is not full width.

        Kind of towards the middle of the article when the vim window screenshots scrolls off on top, it becomes very jarring to read. Perhaps maybe because I sit at a bit of a distance from my screen?

        Different strokes for different folks.

        • AstonJ

          Yes I could see why it might be a bit jarring on such a large screen with a relatively small dot pitch. I will have a think about it – thanks for the feedback Aditya :)

  • Les Nightingill

    recently discovered a feature of NERDTree that I’ve started using a lot… with cursor in NERDTree window type ‘m’ (means ‘menu’) for a menu of file commands (add,move,copy etc).

    • AstonJ

      Yeah that’s a good one, thanks Les – added!

  • Andreas

    The codeschool.vim theme looks awesome on gvim, but I can’t get it to work on vim. I’m running Ubuntu. Any idea what the problem might be?

  • http://rubyflewtoo.blogspot.com/ Ruby flew too

    Great write up thanks – I’ve been a sort of vim tinkerer for years and I’m currently very used to SublimeText, but there’s something appealing about the barebones nature of vim.

  • Twice

    This is a very awesome writeup which has made me to ditch sublimetext 2 and textmate and move to vim.
    The only problem I am having is installing plugins like sparkup and zencoding. Anyone know how I can install these plugins using this setup?

    • Rafał Lisowski

      Usually to easy plugin managment I use Vundle (https://github.com/gmarik/vundle) or pathogen (https://github.com/tpope/vim-pathogen). If you don’t wan’t to use any extra tools you just copy plugin content to your ~/.vim directory. But when you start using many plugins that way is very messy. It’s also hard to update/delete particular plugin when you just copy files into ~/.vim directory.

      • Twice

        Thanks for the pointer, you’ll forgive my greenness; it seems to me Janus and Vundle kind of do the similar thing. Am I right? This, ultimately leading to the question: can I run Janus and vundle together on a single vim installation? Or is there a need to? Or can I just choose one of them?

        • Rafał Lisowski

          Vundle and pothogen are some kind plugins managers (more or less). Janus is a predefined plugins set with extra configuration (which is using pathogen by the way). If you using Janus and want to add some extra plugins see customization section in readme: https://github.com/carlhuda/janus#customization.

          • Twice

            Thanks. I think I’ll try the vundle route and see how it pans out. It looks interesting from the few samples I’ve seen.

  • http://metalelf0.github.com Andrea Schiavini

    Another recent addition to my .vimrc:

    set linespace=2

    It adds some breathing between lines. I love it!

  • Jason

    Anyone able to get this to work with terminal (mac)vim?

  • Aleksey

    Using MacVim, Codeschool looks very well. There was some roughnesses: invisible vertical split margin and incorrect color in diff file type – so I made some fixes, one who wishes could checkout it here:

    https://github.com/isch/configs/blob/master/.vim/colors/codeschool.vim

  • http://www.webmove.be Anthony Candaele

    Hi AstonJ

    Thanks for this blogpost. I’m a complete Rails and Mac newbie (just bought my first Mac), so following your instructions is not completely evident for me.

    I managed to install MacVim and the Janus: Vim Distribution.

    However, when I try to install the Codeschool Colorscheme, I’m stuck because I can’t locate the /.gvimrc.after file to paste in the customization code.

    Does anyone have an idea what the problem could be?
    Thanks for your help,
    Anthony

    • AstonJ

      Hi Anthony, go ahead and create the file – also, you may need to create the colors directory too (for the theme).

      Good luck with your Mac and Rails – be sure to check out my guide to learning Ruby and Rails too :)

      http://astonj.com/tech/best-way-to-learn-ruby-rails//

      • http://www.webmove.be Anthony Candaele

        Hi Aston,
        I did manage to edit the /.gvimrc.after file, but somehow the colorscheme is not showing up in vim. But for now I installed the Codeschool colorscheme in Textmate. I’ll think I’m not ready yet for vim, and will stick for now with Textmate :)
        Also thanks for the learning tips. For the moment I’m making my way through ‘Agile Web Development with Rails (Fourth Edition), which is a great tutorial as the code demo’s actually do work (which cannot be said of lot’s of computer books out there).
        greetings,
        Anthony

  • Paddy

    First, thanks a lot for the Code School theme, one of my 2-3 favorites vim themes ! Actually, I’m a vim-gutter user and as the gutter color wasn’t defined, it just appeared with a ugly light gray background, so I just made a minor change to your theme and added a SignColumn line :

    ” Added SignColumn used by Vim-gutter to match default BG colour
    ” Background color is the same as the one defined by the “:hi Normal” line
    hi SignColumn ctermbg=145 guibg=#252c31 gui=NONE

    In case it helps anyone else !
    Cheers,
    Paddy

  • Mad Hatter

    Complete newbie here with vim themes, but couldn’t manage to make this work. Sad.

  • Rafał Lisowski

    Hi,
    codeschool theme doesn’t work for me in terminal vim so I decide to fix that yesterday.
    before: https://docs.google.com/file/d/0BwkhMj4_SO8RcDY4c1J0S1h1ZEU
    after: https://docs.google.com/file/d/0BwkhMj4_SO8RZU13TzY0V1dLajA
    You can see my changes here https://github.com/korin/dotfiles/blob/master/.vim/colors/codeschool.vim

    Is there any official repo that I could do pull request?

  • Pingback: 10 vim color schemes you need to own | 墨客水人

  • Roney Fraga

    Thanks!
    My vim is now really good.

  • Stephen Carboni

    I imagine this theme works well with Python?

  • Alejandro

    it didn’t work for me, this is my screenshot:

    http://imagebin.org/310155

    I copied/pasted as well as you said. also, the .gvimrc.after didn’t exist so I did $touch .gvimrc.after

    is that OK ?