I discovered another Vim command this week that made working with raw HTML much easier and figured I would share it.

The command sequence is dit. Focus the cursor over an HTML tag and in normal mode type dit. The contents of the tag will be deleted and the empty tag will remain. The cursor will be positioned at the end of the first tag. In order to insert more content all you need to do is type i and begin entering the new contents of the tag. This command comes in very handy when having to make lots of manual changes to an HTML document.

Example: Before:

After:

When working with raw HTML it’s helpful to have the markup indented so you can easily see parent/child and sibling relationships. In your .vimrc you will want to have a line turning on the file type indent on: filetype indent on. Whenever you open up a html file or paste html into an empty buffer make sure the file type is set by running :set ft in normal mode. Vim should print filetype=html as the result. If it doesn’t you want to correct the file type before proceeding. Then select all the markup and simply type = in normal mode. The HTML should be nicely indented with the settings you specified in your .vimrc or filetype file. Note that on large files this can take a while (sometimes almost a minute).

If you have any other vim commands that you frequently use when working with Vim I would love to hear about them!