Emmet: HTML Expansion and Traversal

One of the things I love about Vim is it has some efficient tag editing features: I use cit (change inner tag) all the time when editing HTML or XML. However, there's always room for improvement. Emmet is a project that brings workflow improvements to editors for working with HTML and CSS. It can expand CSS selectors to the equivalent HTML. CSS selectors are an efficient shorthand for those of us who write a lot of CSS and client-side JavaScript.

Emmet can also wrap lines in new tags, expand self-closing tags to a pair, insert snippets, and more. All of the features are documented with videos at docs.emmet.io.

Emmet-vim by Yasuhiro Matsumoto brings some of these features to Vim. For example, html:5 then C-y will expand into a basic HTML5 document. This also works for CSS-style expansions. If you've got ImageMagick installed then it can even add width and height attributes to img tags.

Installation and basic usage instructions are included in the project’s readme on GitHub, otherwise see the full documentation for all of the commands.