6

I want to do the following:

When I insert an HTML tag (which is a sequence of text that starts with <tagname tag_attributes and ends with >), as soon as I press > to insert the > character, I want:

  1. A text </tagname> to be inserted two lines under the current line.
  2. Put the cursor on the line which is between the opening and closing tags.
  3. Insert a tab.

So, when I insert a text such as <div possibly_attributes and insert >, I want the following:

<div possibly_attributes>
    [cursor here]
</div>

How can I do this?

Improve this question
1
  • 1
    As others pointed emmet-vim is a tool you should definitely try. You write div#main and you get the full html - <div id="main"></div>.
    – Al.G.
    Sep 27, 2016 at 17:18

5 Answers 5

Reset to default
13

Here is a simple ad-hoc solution to put in ~/.vim/after/ftplugin/html.vim:

inoremap <buffer> > ></<C-x><C-o><C-y><C-o>%<CR><C-o>O

Breakdown:

></                insert '></'
<C-x><C-o><C-y>    use the built-in omni-completion to finish the closing tag
<C-o>%             move the cursor to the beginning of your closing tag
<CR>               insert a newline to push the closing tag on its own line
<C-o>O             open a new line above the current line

And here is how it looks like in practice:

imap

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.

--- edit ---

Using Vim productively will be very hard without the following lines in your vimrc:

set backspace=indent,eol,start
set hidden
filetype plugin indent on
syntax on

The solution above is guaranteed to work with that minimal setup.

--- endedit ---

Improve this answer
11
  • I couldn't get this working. Do I need to press another thing as well after I press >?
    – Utku
    Sep 25, 2016 at 18:43
  • No. The right hand side is executed when you press >. It should work with a very minimal vimrc.
    – romainl
    Sep 25, 2016 at 19:04
  • So do I need to put something in .vimrc as well? I have put the plugin in ~/.vim/after/ftplugin/ but couldn't get it working.
    – Utku
    Sep 25, 2016 at 19:05
  • Maybe a config issue… see my edit.
    – romainl
    Sep 25, 2016 at 19:23
  • Still not working. Is ~/.vim/after/ftplugin/ the correct place? Also, I have tried putting inoremap <buffer> > ></<C-x><C-o><C-y><C-o>%<CR><C-o>O to my .vimrc. This time it did something but it stopped after inserting </ and said E764: Option 'omnifunc' is not set.
    – Utku
    Sep 25, 2016 at 19:29
5

See vim-closetag

It's exactly what you're looking for. From it's README:

If this is the current content:

<table|

Now you press >, the content will be:

<table>|</table>

And now if you press > again, the content will be:

<table>
   |
</table>

Note: | is the cursor here

Improve this answer
2

Disclaimer This is not directly what you want but I think it can be worth it to mention it here.

If you are ready to use an additional plugin, you could try to use a snippet engine.

For example, Utlisnips comes with a lot of html snippets. For example, you can simply write div, press the key configured to trigger a snippet extension and you'll get the structure you're looking for.

Here are some (not all) of the snippets available. Note that you can easily add the ones you want:

- DocType XHTML 1.1
- HTML - 5.0 (doctype)
- IE Conditional Comment: Internet Explorer
- IE Conditional Comment: NOT Internet Explorer
- Input with Label
- Select Box
- XHTML   <textarea>
- XHTML <a mailto: >
- XHTML <base>
- <body>
- <div>
- <div> with class
- <div> with ID & class
- XHTML <form>
- XHTML <h1>
- XHTML <link>
- XHTML <meta>
- XHTML <script src...>
- XHTML <script>
- <span>
- <span> with class
- <span> with ID & class
- XHTML <style>
- XHTML <table>
- Link
- paragraph
- list item
- unordered list
- table cell
- table header
- table row

If a snippet plugin is overkill but you are still okay to use a plugin you can also try the emmet plugin which provides a syntax to shortcut your HTML/CSS and expand it easily.

You can see how it works here

Improve this answer
1

The old and venerable closetag plugin automatically determines the current HTML / XML tag, and inserts a proper closing tag. It is triggered by Ctrl + _ by default.

I would not recommend automatic insertion; that's probably causing more problems than it solves. But this insert-mode mapping might help:

:imap > ><C-_><C-o>F<lt>
Improve this answer
1

This plugin html.vim helps me a lot when editing html/xml files. The only thing you should do is save your currently edited file with .html extension.

Improve this answer
1
  • Not necessarry to use the html extention. What if I'm using the twig template engine and want my files to end in .twig? It's set filetype that's important here.
    – Al.G.
    Sep 27, 2016 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.