Menu
It's been a while since I've had to do any HTML-like code in Vim, but recently I came across this again. Say I'm writing some simple HTML:
<html><head><title>This is a title</title></head></html>
How do I write those closing tags for title, head and html down quickly? I feel like I'm missing some really simple way here that does not involve me going through writing them all down one by one.
Of course I can use CtrlP to autocomplete the individual tag names but what gets me on my laptop keyboard is actually getting the brackets and slash right.
219
An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /).
For example, you may type <li>example</ then press Ctrl-x Ctrl-o to automatically finish typing the tag so the text reads <li>example</li> . With this abbreviation, you can simply type </ then press Space to automatically complete the tag.
Example Explained The <html> element is the root element and it defines the whole HTML document. It has a start tag <html> and an end tag </html> . The <body> element defines the document's body. It has a start tag <body> and an end tag </body> .
press d ("d") to delete it.
For example, you may type <li>example</ then press Ctrl-x Ctrl-o to automatically finish typing the tag so the text reads <li>example</li> . With the following abbreviation in your vimrc, you can simplify this process:
When typing an html document, you can automatically close html tags using omni completion. For example, you may type <li>example</ then press Ctrl-x Ctrl-o to automatically finish typing the tag so the text reads <li>example</li> .
Here is a simple ad-hoc solution to put in ~/.vim/after/ftplugin/html.vim: But you should definitely take a look at plugins like Sparkup / Emmet, that let you use a concise CSS-like notation to produce proper HTML, or Snipmate / Ultisnips that let you create and expand very powerful snippets for any language.
When you open a tag ( e.g. type <p> ), it expands the tag as soon as you type the closing > into <p></p> and places the cursor inside the tag in insert mode. If you then immediately type another > ( e.g. you type <p>> ), it expands that into
I find using the xmledit plugin pretty useful. it adds two pieces of functionality:
<p>), it expands the tag as soon as you type the closing > into <p></p> and places the cursor inside the tag in insert mode.If you then immediately type another > (e.g. you type <p>>), it expands that into
<p>
</p>
and places the cursor inside the tag, indented once, in insert mode.
The xml vim plugin adds code folding and nested tag matching to these features.
Of course, you don't have to worry about closing tags at all if you write your HTML content in Markdown and use %! to filter your Vim buffer through the Markdown processor of your choice :)
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
