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

wds*_*wds 111 html xml vim autocomplete

已经有一段时间了,因为我不得不做任何类似HTML的代码Vim,但最近我又遇到了这个问题.说我写的很简单HTML:

<html><head><title>This is a title</title></head></html>
Run Code Online (Sandbox Code Playgroud)

如何快速写下title,head和html的结束标记?我觉得我在这里错过了一些非常简单的方法,不会让我一个接一个地写下它们.

当然,我可以使用CtrlP自动填充单个标签名称但是我的笔记本电脑键盘上的东西实际上是正确的括号和斜线.

hak*_*are 73

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

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

    <p>

    </p>

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

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

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

  • 我不喜欢这个插件,因为它没有提供一种简单的方法来让你的光标超过生成的标签.例如,如果你想写"有一个<b>好</ b>天",你可以先输入"有一个<b>好",然后再写为"有一个<b>好看| </ b >".然后,您需要右箭头或退出插入模式以继续句子的其余部分.这就是为什么按下键来插入结束标记的解决方案更好. (7认同)
  • 我用`git clone https://github.com/sukima/xmledit.git~/.vim/bundle/xmledit`安装了xmledit插件.但它仅在编辑.xml文件时有效.当文件ext是.html或.htm时,它不起作用. (3认同)
  • 这个插件可以在输入“&lt;/”时自动关闭标签吗?或者只是通过一些按键插入结束标签?有时您删除结束标签并希望随后将其插入...... (2认同)
  • @exclipy Vim 有很多内置方法可以做到这一点。首先尝试使用“E”、“f”和“A”命令。 (2认同)
  • @Chad目前,我的解决方案是将文件复制粘贴到同一目录中,将其重命名为"html.vim",这样它也会影响HTML文件.现在,我在〜/ .vim/ftplugin(xml.vim和html.vim)中有两个完全相同的文件. (2认同)

sjh*_*sjh 55

我喜欢简单的东西,

imap ,/ </<C-X><C-O>
Run Code Online (Sandbox Code Playgroud)

  • 有些人想写",/",所以我宁愿使用不同的快捷方式.另一个细节是应该关闭全向完成,而不是等待额外的输入.所以:`imap <silent> <Cc> </ <CX> <CO> <CX>` (8认同)
  • <CX> <CO>做什么?它对我没有任何作用. (3认同)
  • 上面的解决方案得到了很多支持,但缺乏解释,特别是对于像我这样的初学者。它是如何工作的以及如何使用它? (3认同)

Krz*_*Goj 45

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

span|

CTRL+x SPACE

你明白了

<span>|</span>

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

<span>
|
</span>

Ragtag可以做的不仅仅是它(例如插入<%=围绕此%>或DOCTYPE的东西).您可能想查看ragtag作者的其他插件,尤其是环绕声.


Ian*_*n P 38

看一下这个..

closetag.vim

Functions and mappings to close open HTML/XML tags
Run Code Online (Sandbox Code Playgroud)

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

我使用类似的东西.


小智 23

如果你正在做任何精心设计的事情,那么火花很好.

他们网站的一个例子:

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

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

用一个<C-e>.

要做问题中给出的例子,

html > head > title{This is a title}
Run Code Online (Sandbox Code Playgroud)

产量

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
Run Code Online (Sandbox Code Playgroud)


Pre*_*eti 17

还有一个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>
  ---------------------
Run Code Online (Sandbox Code Playgroud)

  • emmet能否关闭已经扩展的标签? (3认同)

Kei*_*son 11

制图

我喜欢让我的块标签(而不是内联)立即关闭并尽可能简单地使用快捷方式(我喜欢尽可能避免使用特殊键CTRL,尽管我用它closetag.vim来关闭我的内联标签.)我喜欢用这个启动标签块时的快捷方式(感谢@kimilhee;这是他的答案的起飞):

inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>O<Space>
Run Code Online (Sandbox Code Playgroud)

样品用法

类型-

<p>[Tab]
Run Code Online (Sandbox Code Playgroud)

结果-

<p>
 |
</p>
Run Code Online (Sandbox Code Playgroud)

where |表示光标位置.

说明

  • inoremap 表示在插入模式下创建映射
  • ><Tab> 表示关闭尖括号和制表符; 这是匹配的
  • ><Esc> 表示结束第一个标记并从插入中退出到正常模式
  • F< 意味着找到最后一个开口角括号
  • l 意味着将光标向右移动一个(不要复制开口尖括号)
  • yt> 表示从光标位置向上移动直到下一个闭合角括号之前(即复制标签内容)
  • o</ 表示在插入模式下启动新行并添加一个开口尖括号和斜杠
  • <C-r>" 表示从默认寄存器(")中以插入模式粘贴
  • ><Esc> 表示关闭结束标记并从插入模式中退出
  • O<Space> 意味着在光标上方的插入模式下开始一个新行并插入一个空格


kim*_*hee 6

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

如果要在这些文件中自动关闭标记,可以像这样映射.

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

(^ R是Contrl + R:您可以输入类似Control + v然后按Control + r)

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

<P> ABCDE |

并键入^ j

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

<P> ABCDE </ P> |


She*_*yar 6

查看 vim-closetag

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

如果这是当前内容:

<table|
Run Code Online (Sandbox Code Playgroud)

现在,按>,内容将是:

<table>|</table>
Run Code Online (Sandbox Code Playgroud)

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

<table>
   |
</table>
Run Code Online (Sandbox Code Playgroud)

注意:|这里是光标


mlo*_*kot 5

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

  1. 自动关闭HTML标签

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

  2. 打开完成

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags


Nic*_*rdt 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
Run Code Online (Sandbox Code Playgroud)

使用示例

类型:

<div class="foo">[Tab]
Run Code Online (Sandbox Code Playgroud)

结果:

<div class="foo">
  |
<div>
Run Code Online (Sandbox Code Playgroud)

其中|表示光标位置

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

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwh/[^%]><CR>la</<C-r>"><Esc>F<i
Run Code Online (Sandbox Code Playgroud)

使用示例

类型:

<div class="foo">[Tab]
Run Code Online (Sandbox Code Playgroud)

结果:

<div class="foo">|<div>
Run Code Online (Sandbox Code Playgroud)

其中|表示光标位置

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