best way to add comments in HTML Closing tag with VIM

Question

I'm learning to use VIM and I like it.

But in many case of long content tag I usually add comments after the HTML closing tag, normally using the name of class attribute as a comment for example ...

<div class="product-list">

  product contents inside

</div> <!-- product-list -->

My question is how can I add the comment <!-- product-list --> in VIM

What I can do so far is type product-list and then v ^ to select the whole word, I feel that I'm close to make it possible but I did not find way to continue to complete it with <!-- and -->

So what I did currently is just type every single charecters which kind of annoying.

Any advise please?

Answer 1

Writing html the normal way is tedious. Instead, use the emmet style;

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.

It's vim plugin is emmet-vim;

emmet-vim is a vim plug-in which provides support for expanding abbreviations similar to emmet.

You can achieve your desired behaviour using c filter:

.product-list|c

will expand to:

<!-- .product-list -->
<div class="product-list">|</div>
<!-- /.product-list -->

To insert only the second comment add to your .vimrc:

  let g:user_emmet_settings = {
  \    'html' : {
  \        'comment_type': 'lastonly'
  \    }
  \}

Then:

.product-list|c

will expand to:

<div class="product-list">|</div><!-- .product-list -->

(| is the cursor position after expansion.)