使用 VIM 在 HTML 结束标记中添加评论的最佳方式

Question

我正在学习使用 VIM，我喜欢它。

但是在很多长内容标签的情况下，我通常在 HTML 结束标签之后添加注释，例如通常使用 class 属性的名称作为注释 ...

<div class="product-list">

  product contents inside

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

我的问题是如何在 VIM

中添加评论 

到目前为止我能做的是输入 product-list 然后 v ^ 到 select 整个词，我觉得我接近实现它但我没有找到方法继续用 

完成它

所以我目前所做的就是输入每个字符，这有点烦人。

有什么建议吗？

Answer 1

这是一个可以帮助您节省一些击键的映射：

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

每当您键入 <!在 insert-mode 期间，它将直接插入  并为您进行选择。

Answer 2

您可以将此宏保存在 vimrc:

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

并将其与 @e 一起使用，光标位于结束标记上。

使用<C-v><CR>插入^M，<C-v><C-r>插入^R，<C-v><Esc>插入^[。

Answer 3

用正常的方式写 html 很乏味。相反，使用 emmet style;

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

它的 vim 插件是 emmet-vim;

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

您可以使用 c filter 实现您想要的行为：

.product-list|c

将扩展为：

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

要仅插入第二条评论，请添加到您的 .vimrc:

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

然后：

.product-list|c

将扩展为：

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

(|为展开后的光标位置。)

Answer 4

我确实使用了 Ultisnips 插件，代码如下：

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

评论说明：

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

我们只使用我们之间的"，比如"this-string"

使用 VIM 在 HTML 结束标记中添加评论的最佳方式

best way to add comments in HTML Closing tag with VIM

html

vim

comments