它已经有一段时间,因为我不得不做任何HTML码在 Vim, 但最近我碰到这个了。说我写一些简单的 HTML:

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

我怎么写那些关闭的标签标题、头部和html下迅速?我觉得我缺了一些非常简单的方式在这里,不涉及我要通过他们写下一个接一个。

当然,我可以使用 CtrlP 自动完成的个人签名,但什么让我在我的笔记本电脑的键盘是实际获得的括号和削减的权利。

有帮助吗?

解决方案

检查出来..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

我使用类似的东西。

其他提示

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

  1. 当您打开标记(例如类型<p>)时,只要您将结束>键入<p></p>并将光标置于插入标记内,它就会展开标记模式。
  2. 如果您然后立即键入另一个<p>>例如您键入</p>),则会将其扩展为

    %!

    <=>

  3. 并将光标置于标记内,以插入模式缩进一次。

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

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

我喜欢最小的东西,

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

我发现让vim为我编写开始和结束标记更方便,而不仅仅是结束标记。您可以使用Tim Pope出色的 ragtag插件。用法看起来像这样(让|标记光标位置) 你输入:

span|

CTRL + x SPACE

你得到了

<span>|</span>

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

<span>
|
</span>

Ragtag可以做的不仅仅是它(例如,插入<!> lt;%=围绕此%<!> gt;或DOCTYPE的东西)。您可能希望通过 ragtag 的作者查看其他插件,尤其是< a href =“http://www.vim.org/scripts/script.php?script_id=1697"rel =”noreferrer“>环绕。

如果你正在做任何精心设计的事情, 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>

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

教程: https://github.com/mattn/zencoding-vim/斑点/主/ 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>
  ---------------------

映射

我喜欢有我的座标记(相对于内联)立即关闭和与作为简单快捷方式为能够(我喜欢,以避免特殊的钥匙喜欢 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> 装置 开始一个新的在线插入方式上的标并插入一个空间

allml(现在为Ragtag)和Omni-completion(<!> lt; C-X <!> gt; <!> lt; C-O <!> gt;) 在.py或.java等文件中不起作用。

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

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

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

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

LT,P GT <!> <!>; ABCDE |

并输入^ j

然后关闭这个标签..

LT,P GT; ABCDE LT; / P GT <!> <!> <!> <!>; |

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

  1. 自动关闭HTML标记

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

  2. 启用完成

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

查看 vim-closetag

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

  

如果这是当前内容:

<table|
     

现在按 <!> gt; ,内容将是:

<table>|</table>
     

现在如果再次按 <!> gt; ,内容将是:

<table>
   |
</table>

注意:|是光标

建立@KeithPinson的优秀答案(抱歉,没有足够的声誉点评论你的答案),这个替代方案将阻止自动完成复制可能在html标签内的任何额外内容(例如,类,ID, etc ...)但不应该复制到结束标记。

更新我已更新我的回复以使用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>

其中|表示光标位置

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

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

示例用法

类型:

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

结果:

<*>

其中>[Tab]表示光标位置

上述两个示例都依赖于>>来表示结束标记(这意味着您必须选择 内联或块样式)。就个人而言,我使用带有<=>的块样式和带有<=>的内联样式。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top