How to edit HTML in Vim?

Question

I'm new to Vim and I'm trying to get used to it. I just created a .vimrc file and got Vim to display line numbers and do incremental searching. I also enabled syntax highlighting. Now I want to enable things to make writing HTML easier. I searched for html.vim in /usr/share/vim and found this:

/usr/share/vim/vim72/syntax/html.vim
/usr/share/vim/vim72/ftplugin/html.vim
/usr/share/vim/vim72/indent/html.vim

Now, what do I have to do to enable HTML auto indentation? Copy those files to ~/.vim? Symlink them? Or does Vim automagically load them from /usr/share/vim/? (It already does HTML syntax highlighting, so I think that's possible - but it doesn't do HTML auto indenting) I heard set autoindent in .vimrc would do the trick, but what's with .c files? I thought they needed set cindent, but does cindent work with HTML?

Answer 1

The very first thing you should do is try vimtutor and complete it a couple of times. Once the basics are covered you can start to play with plugins…

SnipMate is inspired by TextMate's snippets and/so is beautiful, it has a lot of HTML snippets by default and it's extremely easy to add your own. To use it, type div then hit Tab to obtain:

<div id="|">

</div>

with the caret between the "" ready for you to type an id; hit Tab again to move the caret on the blank line:

<div id="myId">
    |
</div>

Beautiful. Many editors have this feature, though.

If you have a lot of HTML to write — say a few emails/newsletters a day — another plugin called SparkUp allows you to produce complex HTML with only a few key strokes and some CSS knowledge. You start by typing something like:

table[id=myTable] > tr*3 > td*2 > img

then you hit <C-e> (CtrlE) to obtain:

<table cellspacing="0" id="myTable">
  <tr>
    <td>
      <img src="|" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
</table>

with the caret inside the first empty "". Hit <C-n> and <C-p> to go to the next/previous field.

Magical. The plugin is available for more editors, though.

I second text objects and Surround.vim which are unbelievably useful.

Another cool feature is the visual-block mode (:help visual-block) where you can select columns of text. Say you have:

<ul>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
</ul>

place your cursor on the > of the first <li>then hit <C-v>and move the cursor downward to the fourth <li>. Hit I (capital I) to enter INSERT mode just before the > and type class="myElement" then <Esc> to obtain:

<ul>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
</ul>

Ho yeah!

Seriously, Vim is great.

Answer 2

Take a look at the AutoCloseTag plugin to close tags as you type them. And set autoindent should be handling HTML indentation for you.

Also you should read the docs in :help text-objects to learn about using the inner and outer tag selections. For example, in normal mode you can do cit to change the text inside the current tag. Or in visual mode at will expand the visual selection to encapsulate the tag around the cursor.

Finally, look at the Surround.vim plugin, which can surround a selection or text object with a tag, or change the tag around it.