articles,

The best Vim config (for me)

Polo Polo Follow Oct 10, 2013 · 7 mins read
Share this

Some time ago, I wrote about a Vim config which was more focused on Node.js. I used it in conjunction to AutoComplPop and a set of other plugins. However, I had to patch the auto-completion plugin for it to behave the way I wanted and it still didn’t quite work the way I hoped (or I simply failed to use it correctly).

The other day, I stumbled upon a fairly recent article called Equipping Vim for JavaScript and it suggested a Vim config which is truly awesome. I encourage you to read the article.

My Vim config is now mostly based on this one + some additional plugins. Here it is.

Pathogen

This is a pre-requisite. Pathogen is a plugin to install plugins and runtime files in their own private directories. Through this separation of concern, it becomes really easy to manage plugins. All plugins will get installed in ~/.vim/bundle/. This is convenient and will look like:

.vim/
  |
  +- autoload/
  |
  +- bundle/
  |    |
  |    +- Plugin-A
  |    |
  |    +- Plugin B
  |    |
  |    +- etc..
  |
  +- etc..

In practice, I recommend to install all “bundle” in a directory called bundle-available and to link (ln -s) from bundle to bundle-available. This will allow to de-activate temporarily a bundle very easily if need be.

YouCompleteMe

This plugin is a life changer. It really turns Vim into an IDE.

It enables as-you-type code completion with several completion engines built-in. In particular for C/C++/Objective-C/Objective-C++ languages, it relies on Clang making it breath taking. It also has support for Python and C#. There is no built-in support for JavaScript but we will “fix” this in a moment. You can grab YouCompleteMe on Github. You won’t regret it.

YCM in action`

The installation is very well detailed. It is not just a “git clone” and requires to compile some extras (including Clang) but it is easy and definitely worth it.

Tern For Vim

This plugin provides Tern-based Javascript editing support to Vim. In particular, it works nicely with YouCompleteMe as it hooks into the Vim omni-completion feature. Tern being a javascript program, it requires Node.js and npm. Once installed, simply hit “npm install”. Everything is explained on the GitHub page.

So go get Tern for Vim if you need Javascript.

Syntastic

Next is Syntastic.

As the name implies, syntastic is a syntax checking plugin. By itself, it does not have the capability to check the syntax for all languages. Rather it relies on external syntax checker and then display the errors nicely in Vim.

The best part if you are editing C-family languages is YouCompleteMe’s integration with syntastic. Because YouCompleteMe uses Clang as a backend, it also benefits to Syntastic for the C/C++/Obj-C/Obj-C++ syntax checking. Simply amazing. A must.

Please note that with JsHint (and most of the checkers I assume), the checks are triggered when the file is written to disk.

DelimitMate

DelimitMate is the kind of plugin that once you use it, you don’t know how you did before without it. It simply provides automatic closing of quotes, brackets, etc… It is simple yet a must. Try it, you’ll love it !

To nicely break lines once a {} is inserted, you can add the following mapping to your .vimrc as suggested by the author of Equipping Vim for Javascript

inoremap <C-c> <CR><Esc>O

Thanks to this mapping, hitting Ctrl-C will insert a carriage return and insert a new line above. When the cursor is in the middle of {} in INSERT mode, this will do just what you expect.

Alternatively, I suggest to remap the <enter> key in INSERT mode to do this automatically in case of brackets or parenthesis. This way, hitting <enter> will do the trick. Add this to your .vimrc:

"BreakLine: Return TRUE if in the middle of {} or () in INSERT mode
fun BreakLine()
  if (mode() == 'i')
    return ((getline(".")[col(".")-2] == '{' && getline(".")[col(".")-1] == '}') ||
          \(getline(".")[col(".")-2] == '(' && getline(".")[col(".")-1] == ')'))
  else
    return 0
  endif
endfun

" Remap <Enter> to split the line and insert a new line in between if
" BreakLine return True
inoremap <expr> <CR> BreakLine() ? "<CR><ESC>O" : "<CR>"

TComment

Because commenting out is tiring, there is a plugin for that: tComment.

This plugin will provide file-type sensible toggling comments for Vim. And it just works great. The primary key maps are not really convenient to me so I remapped some of them:

"Toggle comments
nmap <leader>c :TComment<CR>
"Toggle comments as a block
nmap <leader>= :TCommentBlock<CR>

And the same in VISUAL mode:

vmap <leader>c :TComment<CR>
vmap <leader>= :TCommentBlock<CR>

NERD Tree

Thanks to NERD Tree, I don’t use anymore “:Explore” or “:Sexplore”.

The NERD Tree allows you to explore files in a very nice way. It splits the window and displays the tree at the left of the buffer in edit. An image is worth a hundred words:

Notice the syntax error highligthed by Syntastic

Installation is just a “git clone” away ;-)

Command T

Command T is a plugin that allows to open file with a minimal number of keystrokes. It is extremely powerful and convenient and can be customized. This will soon be the only command you will use to open files.

There is a mode to search among files opened in buffers instead of looking on the disk. This is the fastest and easiest way to switch between buffers. The GitHub repo is here.

Here is the mapping I use:

"CommandT
nmap <leader>e :CommandT<CR>
nmap <leader>b :CommandTBuffer<CR>

Vin Indent Guides

Vim Indent Guides

This plugins is very useful: it highlights indentation level. For Python development, no way around ;-) and very handy for any other languages. The coloration is picked up automatically by the plugin depending on your color scheme. That did not work for me but you have the ability to override it.

Available here.

JavaScript Syntax

vim-javascript-syntax will make your javascript code look good thanks a very nice syntax-aware highlighting.

JavaScript Indentation

vim-javascript is a very nice plugin to get the Javascript indentation right. I used web-indent in the past and I now use this one.

CSS3

Two plugins that I have tried and that seem to be doing a pretty good job:

And because less is awesome and you want to use less:


Happy Vimming !


Polo
Written by Polo Follow
Hi, I am Polo. I have always been interesting in technology since I was a kid. I first started using a Macintosh LC back in the early 90s when I was 10. I have been fascinated by computer science ever since. I discovered the Internet when it was not so much widespread in 1994 and remained connected since. I finally ended-up studying Computer Science and particularly Distributed Systems. I am now an engineering manager.