CODEWITHSUNDEEP
htmlvimcomments
worrawut
worrawut

Reputation: 1068

best way to add comments in HTML Closing tag with VIM

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?

Upvotes: 2

Views: 1847

Answers (4)

SergioAraujo
SergioAraujo

Reputation: 11830

I did use Ultisnips plugin, heres the code:

snippet tcom "generic html tag with coment" w
<${1:div}>
 ${2:content}
</${1/(\w+).*/$1/}> <!-- ${1/.*="([^"]+)".*/$1/} -->
${0}
endsnippet

Explanation about the comment:

$1 ............... mirror placeholder one
/ ................ start substitution on it
.*=" ............. anything until the first "
( ................ start a group match
[^"]+ ............ inside quotes
" ................ closing "
.* ............... the rest of the line

We are using only what we have between ", like "this-string"

Upvotes: 1

dNitro
dNitro

Reputation: 5355

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.)

Upvotes: 4

romainl
romainl

Reputation: 196876

You could save this macro in your vimrc:

:let @e = '$h%/\(id\|class\)^Myi"%A <!-- ^R" -->^[:nohl^M'

and use it with @e with the cursor on the closing tag.

Use <C-v><CR> to insert ^M, <C-v><C-r> to insert ^R, and <C-v><Esc> to insert ^[.

Upvotes: 1

Meninx - メネンックス
Meninx - メネンックス

Reputation: 6431

Here is a mapping that can help you to save some keystrokes:

:inoremap <! <!-- product-list --><Esc>gEviW

Whenever you type <! during insert-mode it will insert directly <!-- product-list --> and do a selection for you.

Upvotes: 3

Related Questions