Vim Essential Plugin: SnipMate
videos

Vim Essential Plugin: SnipMate

on Mar 25th 2011 with 17 comments
Tutorial Details
  • Plugin: snipMate
  • Screencast Length: 6 Minutes
This entry is part 4 of 8 in the Vim Essential Plugins Session
« PreviousNext »

The SnipMate plugin aims to mimic the popular snippets feature in TextMate, which allows you to type a sequence of characters, and then automatically expand to a full block of code or html by pressing Tab. It’s incredibly helpful.


Download the SnipMate Plugin

Usage

Once installed, you only need to type the desired snippet trigger, and then press Tab. Keep in mind, though, that the available snippets are limited to the extension of the file you’re working on. For example, JavaScript snippets will not work within an HTML file, and vice versa.

Try visiting your ~.vim/snippets directory for an overview of all the available shortcut keys. You can even create your own!

snippet mysnippet

If the above snippet is placed within the HTML.snippets file, you’ll then be able to create a bla element by typing the shortcut, mysnippet.

Note: When creating new snippets, you’ll need to either restart Vim, or open a new window before testing.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.danharper.me Dan Harper

    SnipMate was definitely one of the essential plugins for me when moving from TextMate.

    Does anyone know of a way to configure the plugin to load snippets for a different filetype? eg. I have a bunch of CSS snippets which work in .css files, but I’d like them to also work in my .less files.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Dan – You can use :set ft=css.less within your Less file, so that everything within the snippets/css.snippets file will be available.

      • http://www.danharper.me Dan Harper

        Awesome! Works a treat, cheers.

    • ktr

      I ran into a similar problem – I wanted ragel files to be linked up to my C snippets. The problem with the solution suggested by Jeffrey Way (i.e., for my situation) was that when I changed the filetype to c.ragel my auto-indent changed. Thus, I searched the interwebs and found a solution at http://stackoverflow.com/questions/6916250/can-we-use-multiple-snippet-files-for-given-filetype-in-vim/6917150#6917150. Basically:

      call ExtractSnipsFile(g:snippets_dir . ‘c.snippets’, ‘ragel’)

      And voila, it worked! Hope this helps.

  • http://esa-matti.suuronen.org/ Epeli

    Hi, I have created some useful Vim commands for editing snippets:

    https://github.com/epeli/vimconfig/blob/668bb691e4f2e039ef5fa4b929b0595263b4c9e0/vimrc#L361

    They allow one to easily edit snippets and not worry about reloading them.

  • warjan

    You don’t have to restart vim. Now I use snipmate plugin from https://github.com/garbas/vim-snipmate which updates snippets upon save, but in earlier version of the plugin from https://github.com/msanders/snipmate.vim you could do :call ReloadAllSnippets() or :call ReloadSnippet(filetype) to test your changes or new snippets.
    It’s good to know that when creating snippets indenting is important. There are docs available with the plugin.

  • Jozan

    Is there snippets for latest jQuery?

  • Thiago A. Silva

    This piece of code reloads the snippets without the need to restart vim:

    fun! ReloadSnippets(snippets_dir, ft)
    call ResetSnippets()
    call GetSnippets(a:snippets_dir, a:ft)
    endfun

    map ,n :call ReloadSnippets(snippets_dir, &ft)

    Then just map some key to trigger the function (I mapped ,n in that case) and you’re done.

    One drawback of the SnipMate plugin is that it doesn’t support recursive snippets.. so if you’re in the last placeholder of the last typed snippet, a new snippet won’t work there… and that’s a bit annoying.

    Unfortunately the last version of SnipMate dates back to 2009-07-13 and the plugin’s development is stalled. But that’s still the best option we have.

  • http://atthy.com Sathish

    Great Tutorial As Usual..

    But How did you maximize vim with keyboard shortcut?? or is it editing in play?? @ 1:55

    Thanks.

  • Oliver Sumpton

    recommend updating this post to link to the shiny new well maintained snipMate git source:

    https://github.com/garbas/vim-snipmate

    everyone, please use this instead.

    also, if you write css go get:

    https://github.com/tisho/css-snippets-snipmate/blob/master/css.snippets

    • http://www.garbas.si garbas

      css snippets were merged into snipmate…

  • Daniel Balfour

    Great tutorial Jeff!

    Two quick suggestions:

    1. When setting snippets for anything that has units (eg. 10px) its’ a good idea to set the units outside the selector scope, since we’ll always be changing the number of pixels but never the actual units (px)

    2. You can create external selection scopes in case you don’t need every possible attribute.. say you want a class but don’t require an id.

    eg. my header

  • aloykatos

    I installed it on ubuntu vim but it doesn’t work when i press tab. HELP PLEASE!!!

  • http://gplus.to/gerrywastaken Gerry

    Please update the git link to use Garbas’ fork as others have suggested. Your link is no longer being updated: https://github.com/garbas/vim-snipmate

  • http://www.iwebprovider.com Innovative Web Provider

    I’ve notice this plugin on some of your tutorials and I’ve been looking how you did it.Thanks for this sir!