121

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

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

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

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

4

11 回答 11

76

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

  1. 当您打开一个标签（例如type <p>）时，它会在您键入结束时立即展开标签并将光标置于插入模式下的标签内>。<p></p>

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

    <p>

    </p>

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

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

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

于 2008-09-25T18:15:23.377 回答
58

我喜欢极简的东西，

imap ,/ </<C-X><C-O>
于 2009-02-10T14:55:18.440 回答
53

我发现让 vim 为我编写开始和结束标记更方便，而不仅仅是结束标记。您可以使用 Tim Pope 的优秀ragtag 插件。用法如下所示（让 | 标记光标位置）您键入：

跨度|

按CTRL+x SPACE

你得到

<span>|</span>

你也可以使用CTRL+x ENTER而不是CTRL+ x SPACE，你会得到

<跨度>
|
</span>

Ragtag 可以做的不仅仅是它（例如，在这个 %> 或 DOCTYPE 周围插入 <%= 内容）。您可能想查看ragtag 作者的其他插件，尤其是环绕。

于 2008-09-27T18:08:09.653 回答
38

看一下这个..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

我使用类似的东西。

于 2008-09-25T00:12:02.387 回答
23

如果您正在做任何复杂的事情，那么 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 > title{This is a title}

产量

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
于 2010-12-14T12:12:31.710 回答
19

还有一个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>
  ---------------------
于 2011-12-08T01:14:14.580 回答
14

映射

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

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

示例使用

类型——</p> 

<p>[Tab]

结果——</p> 

<p>
 |
</p>

where|表示光标位置。

解释

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

查看vim-closetag

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

如果这是当前内容：

<table|

现在按下>，内容将是：

<table>|</table>

现在如果你再按>一下，内容将是：

<table>
   |
</table>

注意：|这里是光标

于 2017-02-24T00:15:11.267 回答
6

allml（现在是 Ragtag）和 Omni-completion（<CX><CO>）在 .py 或 .java 这样的文件中不起作用。

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

imap <Cj> <ESC>F<lyt>$a</^R">

（ ^R 是 Contrl+R ：您可以像这样输入 Control+v 然后 Control+r ）

（| 是光标位置）现在如果你输入..

<p>abcde|

并输入 ^j

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

<p>abcde</p>|

于 2010-05-29T09:21:43.317 回答
6

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

  1. 自动关闭 HTML 标签

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

  2. 打开完成

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

于 2012-10-26T12:10:54.163 回答
5

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

更新我已经更新了我对filename.html.erb文件处理的回复。
我注意到我的原始响应在 Rails 视图中常用的文件中不起作用，例如some_file.html.erb当我使用嵌入式 ruby​​ 时（例如<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>

where|表示光标位置

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

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

示例使用

类型：

<div class="foo">[Tab]

结果：

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

where|表示光标位置

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

于 2016-08-18T15:47:32.757 回答