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


117

自从我不得不在中进行任何类似HTML的代码以来已经有一段时间了Vim,但是最近我又遇到了这个问题。说我在写一些简单的东西HTML

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

如何快速写下标题,标题和html的结束标记?我觉得我在这里错过了一种非常简单的方法,没有让我一步一步地将它们全部写下来。

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

Answers:



74

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

  1. 当你打开一个标签(例如<p>),它扩展了标签,只要你键入右><p></p>和插入模式将光标置于标签内。
  2. 如果您随后立即键入另一个>例如,键入<p>>),它将展开为

    <p>

    </p>

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

XML VIM插件添加代码折叠和嵌套代码匹配到这些特征。

当然,如果您在Markdown中编写HTML内容并%!通过所选的Markdown处理器过滤Vim缓冲区,则完全不必担心关闭标签:)


键入“ </”时,此插件能否自动关闭标签?还是只是通过一些按键插入结束标记?有时您删除结束标记并希望在以后插入...
bzx 2011年

7
我不喜欢这个插件,因为它没有提供一种简单的方法来使光标移至生成的标记之外。例如,如果要编写“有一个<b>好</ b>天”,可以先输入“有一个<b>好”,然后将其显示为“有一个<b>好|| b >”。然后,您需要右箭头或退出插入模式以继续句子的其余部分。这就是为什么按键插入结束标签的解决方案更好的原因。
2011年

1
@exclipy Vim有很多内置的方法可以做到这一点。对于入门者,请尝试使用“ E”,“ f”和“ A”命令。
user456584

3
我使用安装了xmledit插件git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit。但是它仅在编辑.xml文件时有效。当文件ext是.html或.htm时,它不起作用。
乍得

2
@Chad当前,我的解决方案是将文件复制粘贴到相同的目录中,然后将其重命名为“ html.vim”,从而也将影响HTML文件。现在,我在〜/ .vim / ftplugin中有两个完全相同的文件(xml.vim和html.vim)。
user2719875 2015年

56

我喜欢极少的东西

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

4
<CX> <CO>做什么?它对我没有任何帮助。
exclipy 2011年

8
在某些情况下,您可能想写“,/”,所以我宁愿使用另一种快捷方式。另一个细节是应关闭全功能,而不要等待其他输入。因此:imap <silent> <C-c> </<C-X><C-O><C-X>

1
很酷。还添加<Esc>F<i到此操作的末尾,以便将光标放回标签内。
mVChr

要在插入模式下使用此命令,然后单击,/以关闭标签
thedanotto

上面的解决方案有很多支持,但缺乏解释,特别是对于像我这样的初学者。它如何运作以及如何使用它?
Phemelo Khetho

49

我发现让vim为我写打开和关闭标签,而不只是关闭标签更方便。您可以使用Tim Pope 出色的ragtag插件。您键入的用法如下所示(让|标记光标位置):

跨度|

CTRL+x SPACE

你得到

<span> | </ span>

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

<span>
|
</ span>

Ragtag可以做的不仅是它(例如,在此%>或DOCTYPE中插入<%=内容)。你可能想检查出其他插件乌合之众的作家,尤其是环绕


+1好极了!顺便说一句,这现在被称为ragtagvim.org/scripts/script.php?script_id=1896
neezer 2011年

这绝对是最简单的。Textmate很好,但是Vim击败了它,谢谢Krzysiek。
josemota,2011年

23

如果您正在做任何精心制作的东西,那么火花非常好。

他们网站上的一个例子:

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>

非常感谢你!这比我以前见过的任何东西都要酷,不仅是Vim,而且是其他任何编辑器!超!
克里斯(Chris

这是一个很棒的插件
DenniJensen

该插件是从zen编码演变而来的。后者现在称为Emmet,功能集稍大。
chb

17

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

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


更新:现在称为Emmethttp : //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>
  ---------------------

哇,这是红宝石的创造者吗?
tjklemz

13

制图

我喜欢立即关闭我的块标签(而不是内联标签),并使用尽可能简单的快捷方式(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> 表示关闭结束标签并退出插入模式
  • O<Space> 表示以插入模式在光标上方开始新行并插入空格

@wds哇,是的,我从没想过这个l意思是“正确”而不是“左边” 的事实,哈哈…… 真是一个有趣的错误。您如何看待我的帖子?我注意到您没有投票。
基思·皮森

当然可以。我最近开始使用xml.vim插件(它确实工作得很好)。我建议使用特定于文件类型的自动命令将其添加到您的.vimrc中,即:au filetype html inoremap <buffer> ...
wds 2012年

1
最后,一个自动关闭命令可以完全正常工作-简单!
cnp

我喜欢将光标停留在标签之间。因此,我对其进行了修改以满足自己的需求。inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxi我删除0<Space>并添加了kJxi。向上移动1步,连接两行,删除一个字符,然后进入插入模式。
Samundra

9

退房 vim-closetag

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

如果这是当前内容:

<table|

现在,按>,内容将是:

<table>|</table>

现在,如果>再次按下,内容将是:

<table>
   |
</table>

注意:|这里是光标


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


使用imap <Cj> <ESC> mfF <lyt>`fa </ <CR>“>​​时,克隆标签是您键入^ j而不是行尾($)时光标所在的位置
Pietro

5

这是基于易于发现的Web编写的另一个简单解决方案:

  1. 自动关闭HTML标签

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

  2. 打开完成

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags


1
很棒的回应!!!没有插件!!!(第二项具有linkrot)也许仍然是所有问题的最佳答案,因为修改.vimrc似乎比处理插件要快。加上最
简略的

这在封闭标签后增加了空间:(
Vitaly Zdanevich

4

以@KeithPinson的出色答案为基础(很抱歉,信誉不足,无法对您的答案发表评论),此替代方法将防止自动完成功能复制html标记内的任何多余内容(例如,类,id等)。 。),但不应将其复制到结束标记。

更新我已更新对filename.html.erb文件的响应。
我注意到我的原始响应在Rails视图中常用的文件中不起作用,例如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]信号关闭标签(这意味着你将不得不选择要么内嵌或块样式)。就我个人而言,我使用块样式>[Tab]和内联样式>>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.