如何在 Vim 中快速关闭 HTML 标签？

Posted 2023-03-05

技术标签:

【中文标题】如何在 Vim 中快速关闭 HTML 标签？【英文标题】：How can one close HTML tags in Vim quickly? 【发布时间】：2010-09-12 22:39:11 【问题描述】：

自从我不得不在Vim 中编写任何类似 html 的代码以来已经有一段时间了，但最近我又遇到了这个问题。假设我正在写一些简单的HTML：

<html><head><title>This is a title</title></head></html>

如何快速写下title、head和html的结束标签？我觉得我在这里错过了一些非常简单的方法，不涉及我将它们一一写下来。

当然，我可以使用 CtrlP 来自动完成各个标签名称，但让我在笔记本电脑键盘上使用的实际上是正确使用括号和斜线。

【问题讨论】：

【参考方案1】：

我发现使用xmledit 插件非常有用。它增加了两个功能：

例如

<p>

>

<p></p>

如果您随后立即输入另一个 >（例如您输入 <p>>），它会将其扩展为

<p>

</p>

并将光标置于标签内，缩进一次，处于插入模式。

xml vim 插件为这些功能添加了代码折叠和嵌套标签匹配。

当然，如果您将 HTML 内容写入 Markdown 并使用 %! 通过您选择的 Markdown 处理器过滤您的 Vim 缓冲区，您根本不必担心关闭标签 :)

【讨论】：

这个插件可以在输入''时自动关闭标签吗？或者只是用一些击键插入结束标签？有时您删除结束标记并希望在之后插入... 我不喜欢这个插件，因为它没有提供一种简单的方法让你的光标越过生成的标签。例如，如果你想写“Have a nice day”，你首先输入“Have a nice”，它会呈现为“Have a nice|”。然后，您需要向右箭头或退出插入模式以继续句子的其余部分。这就是为什么按一个键插入结束标签的解决方案更好。 @exclipy Vim 有很多内置的方法可以做到这一点。尝试使用“E”、“f”和“A”命令作为初学者。我用git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit 安装了xmledit 插件。但它仅在编辑 .xml 文件时有效。当文件 ext 为 .html 或 .htm 时，它不起作用。 @Chad 目前，我的解决方案是将文件复制粘贴到同一目录中，并将其重命名为“html.vim”，这样它也会影响 HTML 文件。现在，我在 ~/.vim/ftplugin 中有两个完全相同的文件（xml.vim 和 html.vim）。【参考方案2】：

我喜欢极简的东西，

imap ,/ </<C-X><C-O>

【讨论】：

是做什么的？它对我没有任何作用。

有些情况下想写“,/”，所以我宁愿使用不同的快捷方式。另一个细节是omni-completion应该关闭，而不是等待额外的输入。所以：imap <silent> <C-c> </<C-X><C-O><C-X> 非常酷。还在末尾添加了<Esc>F<i，以便将光标放回标签内。在插入模式下使用该命令，然后点击,/关闭标签上述解决方案有很多赞成票，但缺乏解释，尤其是对于像我这样的初学者。它是如何工作的以及如何使用它？【参考方案3】：

我发现让 vim 为我编写开始和结束标记而不是只写结束标记更方便。您可以使用 Tim Pope 的出色 ragtag plugin。用法看起来像这样（让 | 标记光标位置）你输入：

跨度|

按 CTRL+x 空格

你得到

您也可以使用 CTRL+x ENTER 代替 CTRL+x SPACE，然后你得到

Ragtag 可以做的不仅仅是它（例如，在这个 %> 或 DOCTYPE 周围插入 author of ragtag 的其他插件，尤其是surround。

【讨论】：

+1 太棒了！顺便说一句，这现在被称为 ragtag: vim.org/scripts/script.php?script_id=1896 这个绝对是最简单的。 Textmate 做得很好，但 Vim 在这方面胜过它，感谢 Krzysiek。【参考方案4】：

看看这个..

closetag.vim

Functions and mappings to close open HTML/XML tags

https://www.vim.org/scripts/script.php?script_id=13

我使用类似的东西。

【讨论】：

我已经安装了这个。它不会自动完成关闭标签。什么是快捷键？我尝试Ctrl-_，但这会使我的终端字体变小。【参考方案5】：

如果你做任何复杂的事情，sparkup 非常好。

他们网站上的一个例子：

ul > li.item-$*3 扩展为：

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

<C-e>。

做题中给出的例子，

html > head > titleThis is a title

产量

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>

【讨论】：

非常感谢！这比我以前见过的任何东西都要酷，不仅是 Vim，而且在任何其他编辑器中！超级棒！这是一个很棒的插件这个插件是从 zen-coding 演变而来的。后者现在称为emmet，具有稍大的功能集。【参考方案6】：

还有一个zencoding vim插件：https://github.com/mattn/zencoding-vim

教程：https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

更新：现在称为 Emmet：http://emmet.io/

教程摘录：

1. Expand Abbreviation

  Type abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
  ---------------------
  <div>
      <p id="foo1">
          <a href=""></a>
      </p>
      <p id="foo2">
          <a href=""></a>
      </p>
      <p id="foo3">
          <a href=""></a>
      </p>
  </div>
  ---------------------

2. Wrap with Abbreviation

  Write as below.
  ---------------------
  test1
  test2
  test3
  ---------------------
  Then do visual select(line wize) and type '<c-y>,'.
  If you request 'Tag:', then type 'ul>li*'.
  ---------------------
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  ---------------------

...

12. Make anchor from URL

  Move cursor to URL
  ---------------------
  http://www.google.com/
  ---------------------
  Type '<c-y>a'
  ---------------------
  <a href="http://www.google.com/">Google</a>
  ---------------------

【讨论】：

哇，这是ruby的创造者吗？【参考方案7】：

映射

我喜欢立即关闭我的块标签（而不是内联标签）并使用尽可能简单的快捷方式（我喜欢尽可能避免使用像 CTRL 这样的特殊键，尽管我确实使用 @ 987654321@ 关闭我的内联标签。）我喜欢在开始标签块时使用这个快捷方式（感谢@kimilhee；这是他的回答）：

inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>O<Space>

示例用法

类型——

<p>[Tab]

结果——

<p>
 |
</p>

其中| 表示光标位置。

说明

inoremap 表示以插入模式创建映射 ><Tab> 表示一个右尖括号和一个制表符；这是匹配的 ><Esc> 意思是结束第一个标签，退出插入进入正常模式 F< 表示找到最后一个左尖括号 l 表示光标右移一位（不要复制左尖括号） yt> 表示从光标位置拉到下一个右尖括号之前（即复制标签内容） o</ 表示以插入模式开始新行并添加左尖括号和斜线 <C-r>" 表示从默认寄存器以插入模式粘贴 (") ><Esc> 表示关闭结束标签并退出插入模式 O<Space> 表示在光标上方以插入模式开始新行并插入一个空格

【讨论】：

@wds 哇，是的，我从没想过l 的意思是“右”而不是“左”，哈哈……真是个有趣的错误。你觉得我的帖子怎么样？我注意到你没有投票。当然很好。我最近开始使用 xml.vim 插件（它确实工作得很好）。我建议使用特定于文件类型的自动命令将其添加到您的 .vimrc 中，即：au filetype html inoremap <buffer> ... 终于有一个自动关闭命令，它完全可以正常工作——简单！我喜欢将光标放在标签之间。所以我修改了它以适应我的需要。 inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxi 我删除了0<Space> 并添加了kJxi。前进 1 步，连接两行，删除一个字符，然后进入插入模式。【参考方案8】：

查看`vim-closetag`

这是一个非常简单的脚本（也可作为vundle 插件使用），它可以为您关闭 (X)HTML 标记。来自README：

如果这是当前内容：
<table|
现在你按>，内容将是：
<table>|</table>
现在如果你再次按>，内容将是：
<table>
   |
</table>

注意：| 是这里的光标

【讨论】：

【参考方案9】：

allml（现在是 Ragtag）和 Omni-completion（）不适用于 .py 或 .java 之类的文件。

如果你想在这些文件中自动关闭标签，你可以这样映射。

imap F$a^R">

( ^R 是 Contrl+R : 你可以像这样输入 Control+v 然后 Control+r )

(| 是光标位置) 现在如果你输入..

abcde|

然后输入 ^j

然后它像这样关闭标签..

abcde

【讨论】：

with imap mfF`fa"> 克隆标记是当您键入 ^j 而不是行尾时光标所在的位置（$ )【参考方案10】：

这是另一个基于易于找到的网络写作的简单解决方案：

Auto closing an HTML tag

:iabbrev </ </<C-X><C-O>

Turning completion on

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

【讨论】：

很棒的反应！！！没有插件！！！（第 2 项有 linkrot）也许仍然是最好的答案，因为修改 .vimrc 似乎比处理插件更快。加上最简约的响应这会在闭合标签后添加空格:(【参考方案11】：

基于@KeithPinson 的出色答案（抱歉，还没有足够的声誉点来评论您的答案），这种替代方法将阻止自动完成复制任何可能在 html 标记内的额外内容（例如类、ID、等...），但不应复制到结束标记。

更新我已更新我的回复以使用 filename.html.erb 文件。我注意到我的原始响应在 Rails 视图中常用的文件中不起作用，例如当我使用嵌入式 ruby 时的some_file.html.erb（例如<p>Year: <%= @year %><p>）。下面的代码将与.html.erb文件一起工作。

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwo</<C-r>"><Esc>O

使用示例

类型：

<div class="foo">[Tab]

结果：

<div class="foo">
  |
<div>

| 表示光标位置

并作为添加结束标记内联而不是块样式的示例：

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwh/[^%]><CR>la</<C-r>"><Esc>F<i

使用示例

类型：

<div class="foo">[Tab]

结果：

<div class="foo">|<div>

| 表示光标位置

确实，上述两个示例都依赖>[Tab] 来表示结束标记（这意味着您必须选择either 内联或块样式）。就个人而言，我使用 >[Tab] 的块样式和 >> 的内联样式。

【讨论】：

以上是关于如何在 Vim 中快速关闭 HTML 标签？的主要内容，如果未能解决你的问题，请参考以下文章

如何在浏览器快速打开和关闭标签页

如何快速关闭当前网页?

如何使用vim快速加密和解密文件

如何将标签内的标签快速传递给另一个视图控制器[关闭]

vim 从嫌弃到依赖(14)——快速跳转

您如何管理 iOS 项目中的视图标签？ [关闭]

如何在 Vim 中快速关闭 HTML 标签？

映射

示例用法

说明

查看vim-closetag

查看`vim-closetag`