This article is part of the article series "Vim Plugins You Should Know About."
<- previous article next article ->
Vim Plugins, surround.vim

This is the seventh post in the article series "Vim Plugins You Should Know About". This time I am going to introduce you to a plugin called "ragtag.vim". A month ago it was still known as "allml.vim" but now it has been renamed to ragtag.vim.

The best parts of RagTag are mappings for editing HTML tags. It has a mapping for quickly closing open HTML tags, a mapping for quickly turning the typed word into a pair of open/close HTML tags, several mappings for inserting HTML doctype, linking to CSS stylesheets, loading JavaScript <script src="...">...</script> and it includes mappings for wrapping the typed text in a pair of <?php ... ?> tags for PHP, or <% ... %> for ASP or eRuby, and {% .. %} for Django.

RagTag is written by Tim Pope. He's the master of Vim plugin programming. I have already written about two of his plugins - surround.vim and repeat.vim and more articles about his plugins are coming!

Previous articles in the series.

Here are examples of using the RagTag plugin.

Quickly closing an open HTML tag.

Suppose you have typed <div> and you want to close it without typing the whole closing tag </div> yourself.

The quick way to do it with RagTag is to press CTRL+X /. This mapping automatically closes the last open HTML tag.

Extra tip: If you didn't have this plugin you could quickly close the tag by typing </ and pressing CTRL+X CTRL+O. The default Vim mapping CTRL+X CTRL+O guesses the item that may come after the cursor. In case of an open HTML tag it's the close tag.

Creating a pair of open/close HTML tags from a word.

Suppose you want to quickly create a pair of <div></div> and place the cursor between the two tags.

The quick way to do it with RagTag is to type div and press CTRL+X SPACE. This mapping takes the typed word and creates a pair of HTML tags, one closing tag and one open tag on the same line.

However, if you wish to create open/close tag pair separated by a newline, type CTRL+X ENTER.

Here is an example, if you just typed div and then press CTRL+X ENTER it will produce the following output:

<div>
|
</div>

| indicates the position of cursor.

Insert HTML doctype.

If you type CTRL+X ! RagTag will display a list of HTML doctypes to choose from. Defaults to HTML 4.01 Strict.

This mapping is not that useful, given that I already introduced snipmate.vim plugin for creating snippets. Using snipmate.vim you can create a snippet "h" that would insert the whole HTML structure, including doctype, html, body, title, meta tags, etc.

Link to a CSS stylesheet.

Typing CTRL+X @ inserts the snippet for linking to a CSS stylesheet.

<link rel="stylesheet" type="text/css" href="/stylesheets/|.css">

This is again not that useful, given that we have snipmate.vim.

The mapping is easy to remember because @ is used for importing in CSS.

Insert meta content-type tag.

Typing CTRL+X # inserts the HTML meta tag for document's content type and encoding.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

The charset depends on document's charset. If it's utf-8, the mapping will set the charset to utf-8 in the meta tag.

Load JavaScript document.

Typing CTRL+X $ links to a JavaScript file.

<script type="text/javascript" src="/javascripts/|.js">

The mapping is easy to remember because $ is a valid char in identifiers in many languages.

Wrap the typed text in PHP, Django, eRuby template tags.

There are several different mappings for wrapping text in template tags. It's best to summarize them in the following table. The table assumes you had just typed "foo" and you are editing an eRuby document:

Mapping    Result
---------  -----------
CTRL+X =   foo<%= | %>
CTRL+X +   <%= foo| %>
CTRL+X -   foo<% | %>
CTRL+X _   <% foo| %>
CTRL+X '   foo<%# | %>
CTRL+X "   <%# foo| %>

What this table shows us is, for example, that if you have typed "foo" and press CTRL+X _, the plugin will wrap "foo" in <% %> tags and place the cursor after "foo".

Summary of all the RagTag mappings.

CTRL+X /       Close the last open HTML tag
CTRL+X SPACE   Create open/close HTML tags from the typed word
CTRL+X CR      The same as CTRL+X SPACE but puts a newspace in between
CTRL+X !       Insert HTML doctype
CTRL+X @       Insert CSS stylesheet
CTRL+X #       Insert meta content-type meta tag
CTRL+X $       Load JavaScript document

For the following mappings, suppose that
you have typed "foo".

Mapping        Result
---------      -----------
CTRL+X =       foo<%= | %>
CTRL+X +       <%= foo| %>
CTRL+X -       foo<% | %>
CTRL+X _       <% foo| %>
CTRL+X '       foo<%# | %>
CTRL+X "       <%# foo| %>

How to install ragtag.vim?

To get the latest version:

  • 1. Download ragtag.zip.
  • 2. Extract ragtag.zip to ~/.vim (on Unix/Linux) or ~\vimfiles (on Windows).
  • 3. Run :helptags ~/.vim/doc (on Unix/Linux) or :helptags ~\vimfiles\doc (on Windows) to rebuild the tags file (so that you can read help :help ragtag.)
  • 4. Restart Vim or source ragtag.vim by typing :so ~/.vim/plugin/ragtag.vim (on Unix/Linux) or :so ~\vimfiles\plugin\ragtag.vim

Have Fun!

Have fun closing those HTML tags and until next time!

This article is part of the article series "Vim Plugins You Should Know About."
<- previous article next article ->

Comments

Eugene K. Permalink
March 03, 2010, 17:22

This mapping is not that useful

Same with CTRL-X / to close a tag -- xmledit does that automatically when you type the > (and if you hit > twice, it will move the cursor between the tags.).

March 03, 2010, 17:31

Didn't know about xmledit plugin. :)

John Ferin Permalink
March 03, 2010, 18:47

I've used essentially all the snippet plugins for Vim, including snipmate - but found this under-used gem to be superior: UltiSnips http://www.vim.org/scripts/script.php?script_id=2715

Joe Permalink
March 03, 2010, 20:25

Great plugin, I love it!

One thing I'm missing, though, is attribute support.
It would be great if one could type: div id="x"^X + enter and have that complete as expected. Currently that doesn't work.

Jay Permalink
March 04, 2010, 12:01

Alas, no Template Toolkit [% %] tag support

March 05, 2010, 02:19

If you think ragtag is cool you should try out zencoding. It supports all kinds of cool stuff like setting ids and classes with a css selector like format.

http://code.google.com/p/zen-coding/

There is a new vim plugin written in pure vimscript by Yasuhiro Matsumoto on github.

http://github.com/mattn/zencoding-vim

March 05, 2010, 07:21

Zencoding seems similar to sparkup.vim.

Roman Permalink
March 08, 2010, 16:55

Typing CTRL+X # inserts the HTML meta tag for document’s content type and encoding.

Typing CTRL+X $ inserts the HTML meta tag for document’s content type and encoding.

Yank/put much? 8=]

March 08, 2010, 20:19

Roman. :) fixed.

muxe Permalink
March 16, 2010, 20:16

CTRL X _ and CTRL X - both generate


for me.

muxe Permalink
March 16, 2010, 20:17

tohelo Permalink
January 19, 2011, 17:15

Thank you for writing this article series. I have founded a couple very cool plugins via here.

July 22, 2013, 20:00

best food blender Playfully Delicious – Mighty Mixer – Play Set
http://www.electricalstore.info/kitchen-appliances/blenders/best-food-blender-playfully-delicious-mighty-mixer-play-set.html

March 20, 2014, 01:54

You really make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. forex trading It seems too complicated and very broad for me. I'm looking forward for your next post, I�ll try to get the hang of it

Leave a new comment

(why do I need your e-mail?)

(Your twitter name, if you have one. (I'm @pkrumins, btw.))

Type the first letter of your name: (just to make sure you're a human)

Please preview the comment before submitting to make sure it's OK.

Advertisements