代码之家 › 专栏 › 技术社区 › wds

如何快速关闭VIM中的HTML标记?

autocomplete vim xml html

107

wds · 技术社区 · 16 年前

我已经有一段时间没有做过类似HTML的代码了 Vim 但是最近我又遇到了这个问题。说我写的很简单 HTML :

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

如何快速写下标题、标题和HTML的结束标记?我觉得我错过了一些非常简单的方法,不需要我一个接一个地把它们写下来。

我当然可以用 Ctrl键 磷 要自动完成单个标签名,但我在笔记本电脑键盘上得到的是括号和斜线。

11 回复 | 直到 16 年前

Ivan G. 6 年前

看看这个……

关门

Functions and mappings to close open HTML/XML tags

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

我用类似的东西。

Ivan G. 6 年前

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

当你打开标签时( 例如类型 <p> )它会在您键入结束语后立即展开标记。 > 进入之内 <p></p> 并以插入模式将光标放在标记内。
如果你马上打另一个 > ( 例如你型 <p>> )它将其扩展为

<P & GT;

</p>

并将光标放在标签内,以插入模式缩进一次。

这个 xml VIM插件为这些特性添加了代码折叠和嵌套标记匹配。

当然,如果将HTML内容写入 Markdown 使用 %! 通过你选择的降价处理器过滤你的VIM缓冲区:)

sjh 15 年前

我喜欢最小的东西,

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

Hulk1991 moinudin 11 年前

我发现让Vim为我写下开始和结束标签,而不仅仅是结束标签更为方便。你可以用优秀的 ragtag plugin Tim Pope。用法如下(让标记光标位置) 你的类型:

span|

按 CTRL + X 空间

你得到

<span>|</span>

您也可以使用 CTRL + X 进入 而不是 CTRL + X 空间 你得到

<span>
|
</span>

ragtag可以做的不仅仅是它(例如,在这个%gt;或doctype周围插入<%=内容)。您可能希望通过以下方式签出其他插件: author of ragtag 特别是 surround .

thanthese 14 年前

如果你在做任何复杂的事情, 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>

Preet Kukreti 11 年前

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

辅导的: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

更新: 现在这个叫做 埃米特 : 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>
  ---------------------

Keith Pinson sumit vedi 11 年前

映射

我喜欢立即关闭我的块标记(与内联相反),并尽可能简单地使用快捷方式(我喜欢避免像 CTRL 如果可能的话,尽管我确实使用 closetag.vim 关闭内联标记。)我喜欢在启动标记块时使用此快捷方式(感谢@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 & GT; 方法关闭结束标记并退出插入模式
O<Space> 方法在光标上方以插入模式开始新行并插入空格

kimilhee 14 年前

allml(现在是ragtag)和omni完成(<c-x><c-o>) 在像.Py或.java之类的文件中不起作用。

如果要自动关闭这些文件中的标记, 你可以这样画地图。

imap <C-j> <ESC>F<lyt>$a</^R">

(^r是contrl+r:您可以键入此control+v,然后键入control+r)

(是光标位置) 现在,如果你键入..

<阿布迪

类型j

然后像这样关闭标签……

<p>abcde</p>。|

mloskot 12 年前

下面是另一个简单的解决方案,它基于易于找到的Web编写:

Auto closing an HTML tag

:iabbrev </ </<C-X><C-O>
Turning completion on

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

Sheharyar 7 年前

退房 `vim-closetag`

这是一个非常简单的脚本(也可以作为 vundle 插件)关闭(x)HTML标记。从它的 README :

如果这是当前内容:
<table|
现在你按下 > ,内容如下:
<table>|</table>
现在如果你按 > 同样,内容将是:
<table>
   |
</table>

注: | 光标在这里吗

Nick Erhardt 8 年前

以@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

样品使用

Type:

<div class="foo">[Tab]

结果:

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

哪里 | 指示光标位置

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

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

样品使用

Type:

<DIV class=“foo”>[选项卡]

结果:

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

哪里 γ 指示光标位置

以上两个例子都依赖于 >[Tab] 要发出结束标记的信号(意味着您必须选择 任何一个 内联或块样式)。就我个人而言,我使用块样式 >[制表] 和内嵌样式 >> .

如何快速关闭VIM中的HTML标记?

映射

样品使用

解释

退房 vim-closetag

退房 `vim-closetag`