Vim tip: Fun with tags

less than 1 minute read

HTML can feel unwieldy and inefficient to edit. There are lots of great tools and alternate syntaxes that make this easier… but who wants to set up a whole framework and all the dependancies that come with that just to be more efficient. With a basic Vim command and the surround plugin you can greatly increase your productivity traversing and manipulating tags.

Say, for instance, you have:

<ul>
  <li>something</li>
  <li>something else</li>
</ul>
  1. Place your curser inside the list item
  2. Type vit. This will visually (v) select the text inside (i) the surrounding tag (t).
  3. Now type s <a href="#" > and the surround plugin wraps the selected text with anchor tags

I find that the surround plugin is an excellent companion to the sparkup plugin.

Updated: