如何快速closuresVim中的HTML标签?

这已经有一段时间了,因为我不得不在Vim做类似HTML的代码,但是最近我又遇到了这个问题。 假设我正在写一些简单的HTML

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

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

当然,我可以使用Ctrl P自动完成单个标签的名称,但是笔记本电脑键盘上的内容实际上是正确的取括号和斜线。

看一下这个..

closetag.vim

 Functions and mappings to close open HTML/XML tags 

http://vim.sourceforge.net/scripts/script.php?script_id=13

我使用类似的东西。

我发现使用xmledit插件相当有用。 它增加了两个function:

  1. 当您打开一个标签( 例如键入<p> )时,只要您将闭合>键入到<p></p> ,就会展开标签,并将光标置于插入模式下的标签内。
  2. 如果你立即input另一个>例如你键入<p>> ),它将把它扩展为

    <p>

    </p>

并在插入模式下将光标置于标记内,缩进一次。

xml vim插件将代码折叠和嵌套标签匹配添加到这些function中。

当然,如果你在Markdown中编写你的HTML内容并使用%!你完全不必担心closures标签%! 通过您select的Markdown处理器来过滤您的Vim缓冲区:)

我喜欢最小的东西,

 imap ,/ </<CX><CO> 

我发现让vim为我写入开始和结束标记,而不仅仅是closures标记更为方便。 你可以使用Tim Pope出色的ragtag插件 。 用法如下所示(让|标记光标位置)键入:

 跨度| 

CTRL + x 空格键

你得到了

  <跨度> | </跨度> 

您也可以使用CTRL + x ENTER而不是CTRL + x SPACE ,就可以得到

  <跨度>
 |
 </跨度> 

Ragtag可以做的不仅仅是它(例如,在这个%>或DOCTYPE周围插入<%= stuff)。 你可能想要查看其他插件作者ragtag ,尤其是环绕声 。

如果你做了任何细节, sparkup是非常好的。

来自他们网站的例子:

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

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

与一个<Ce>

要做问题中给出的例子,

 html > head > title{This is a title} 

产量

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

还有一个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 '<cy>,'. --------------------- <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 '<cy>,'. 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 '<cy>a' --------------------- <a href="http://www.google.com/">Google</a> --------------------- 

制图

我喜欢立即closures我的块标记(而不是内联),并尽可能使用简单的快捷方式(尽可能避免像CTRL这样的特殊键,尽pipe我使用closetag.vim来closures我的内联标记。)喜欢在启动代码块时使用这个快捷方式(感谢@ kimilhee;这是他的回答):

 inoremap ><Tab> ><Esc>F<lyt>o</<Cr>"><Esc>O<Space> 

示例用法

types-

 <p>[Tab] 

结果-

 <p> | </p> 

在哪里| 指示光标位置。

说明

  • inoremap 意味着在插入模式下创build映射
  • ><Tab> 表示一个closures尖括号和一个制表符; 这是匹配的
  • ><Esc> 表示结束第一个标签并从插入转换到正常模式
  • F< 表示find最后一个打开的angular度支架
  • l 表示将光标右移一个(不要复制开angular尖括号)
  • yt> 表示从光标位置向上拉到下一个closuresangular括号之前(即复制标签内容)
  • o</ 表示在插入模式下开始换行并添加一个开angular尖括号和斜线
  • <Cr>" 表示从默认寄存器( " )插入模式下粘贴
  • ><Esc> 表示closures结束标记并退出插入模式
  • O<Space> 表示在光标上方的插入模式下插入新行并插入空格

allml(现在是Ragtag)和Omni-completion(<CX> <CO>)在.py或.java文件中不起作用。

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

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

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

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

<P> ABCDE |

并键入^ j

那么它就像这样closures标签

<P> ABCDE </ P> |

这是另一个简单的解决scheme,基于易于find的Web写作:

  1. 自动closuresHTML标记

    :iabbrev </ </<CX><CO>

  2. 打开完成

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

build立在@KeithPinson的优秀答案(抱歉,没有足够的声望点评论你的答案),这个替代scheme将阻止自动完成复制任何额外的东西,可能是在HTML标签(例如类,ID等。 ),但不应复制到结束标记。

更新我已更新我的响应与filename.html.erb文件的工作。
我注意到我的原始响应在Rails视图中通常使用的文件中不起作用,比如some_file.html.erb当我使用embedded式ruby(比如<p>Year: <%= @year %><p> )。 下面的代码.html.erb文件一起使用。

 inoremap ><Tab> ><Esc>?<[az]<CR>lyiwo</<Cr>"><Esc>O 

示例用法

types:

 <div class="foo">[Tab] 

结果:

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

在哪里| 指示光标位置

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

 inoremap ><Tab> ><Esc>?<[az]<CR>lyiwh/[^%]><CR>la</<Cr>"><Esc>F<i 

示例用法

types:

 <div class="foo">[Tab] 

结果:

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

在哪里| 指示光标位置

确实,上面的两个例子都依赖于>[Tab]来标记一个结束标记(意味着你必须selectembedded或者块样式)。 就个人而言,我使用>[Tab]的块样式和>>的内联样式。

看看vim-closetag

这是一个非常简单的脚本(也可作为vundle插件),为您closures(X)HTML标签。 从它的README

如果这是目前的内容:

 <table| 

现在你按> ,内容将是:

 <table>|</table> 

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

 <table> | </table> 

注意: | 这里是光标