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.