Aston J

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

Posted on: June 28th, 2012 by AstonJ 55 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: , ,

55 Responses

  1. Rafał Lisowski says:

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

  2. Rafał Lisowski says:

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

    • AstonJ says:

      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.

  3. Chris Oliver says:

    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.

  4. Sander says:

    Small error, the line:

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

    Should be:

    Then, open ~/.vimrc.after

    Otherwise, thanks for this article!

  5. polarblau says:

    Thanks a alot! Very handy compilation.

  6. polarblau says:

    Thanks a lot! Very handy compilation.

  7. Tor says:

    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

  8. 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! ;)

  9. Blake says:

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

      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!

  10. 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 says:

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

  11. [...] Vim for Ruby on Rails (and A Sexy Theme!) Last week's link to using Sublime Text 2 was popular but this week's turn is Vim! Aston J aims to show off why Vim is a good choice for Rails development along with a bevy of commands. [...]

  12. Diego says:

    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.

  13. 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 says:

      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?

      • 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 says:

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

  14. Les Nightingill says:

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

  15. Andreas says:

    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?

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

  17. Twice says:

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

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

        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?

  18. Another recent addition to my .vimrc:

    set linespace=2

    It adds some breathing between lines. I love it!

  19. Jason says:

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

  20. Aleksey says:

    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

  21. 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 says:

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

      • 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

  22. Paddy says:

    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

  23. Mad Hatter says:

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

  24. Rafał Lisowski says:

    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?

  25. Roney Fraga says:

    Thanks!
    My vim is now really good.

  26. Stephen Carboni says:

    I imagine this theme works well with Python?

Leave a Reply