使用VIM

Question

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

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

<div class="product-list">

  product contents inside

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

我的问题是如何在VIM中添加评论<!-- product-list -->

到目前为止我可以做的是输入product-list，然后选择v ^来选择整个单词，我觉得我接近使它成为可能但我没有办法继续使用<!--和-->

完成此操作

所以我现在所做的只是输入每一个烦人的字符。

有什么建议吗？

Answer 1

这是一个可以帮助您保存一些按键的映射：

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

每当您在插入模式下键入 ＆lt; ！ 时，它将直接插入<!-- product-list -->并为你做一个选择。

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是许多流行文本编辑器的插件，可以大大改进   HTML＆amp; CSS工作流程。

它的vim插件是emmet-vim;

  

emmet-vim是一个vim插件，为扩展提供支持   缩写类似于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/}> <!-- ${1/.*="([^"]+)".*/$1/} -->
${0}
endsnippet

评论说明：

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

我们只使用我们之间的“，就像”这个字符串“