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插件非常有用.它增加了两个功能:
<p>
),它一旦扩展标记为你键入右>
进<p></p>
和插入模式将光标置于标签内.如果您然后立即键入另一个>
(例如您键入<p>>
),它会将其扩展为
<p>
</p>
并将光标置于标记内,在插入模式下缩进一次.
的XML VIM插件添加代码折叠和嵌套代码匹配到这些特征.
当然,如果您在Markdown中编写HTML内容并使用%!
通过您选择的Markdown处理器过滤Vim缓冲区,则根本不必担心关闭标记:)
sjh*_*sjh 55
我喜欢简单的东西,
imap ,/ </<C-X><C-O>
Run Code Online (Sandbox Code Playgroud)
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)
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>
意味着在光标上方的插入模式下开始一个新行并插入一个空格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> |
vim-closetag
这是一个非常简单的脚本(也可以作为vundle
插件使用),可以为您关闭(X)HTML标记。从README
:
如果这是当前内容:
Run Code Online (Sandbox Code Playgroud)<table|
现在,按>,内容将是:
Run Code Online (Sandbox Code Playgroud)<table>|</table>
现在,如果>再次按,内容将是:
Run Code Online (Sandbox Code Playgroud)<table> | </table>
注意:|
这里是光标
这是基于易于发现的Web编写的另一个简单解决方案:
:iabbrev </ </<C-X><C-O>
autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags
基于@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 >>
。