Zen Coding:写HTML/CSS之辅助利器 » 荒野无灯weblog

Keep It Simple, Stupid.

荒野无灯weblog

Zen Coding:写HTML/CSS之辅助利器

其实很早以前就认识这个插件了,这个插件几乎有所有流行编辑器的支持。
如DW,notepad++,Aptana/Eclipse,TextMate,Komodo Edit/IDE,Sublime Text,EmEditor等。
不过Vim版的插件并非官方支持的。
详见: zen-coding – Set of plugins for HTML and CSS hi-speed coding
Vim版的插件最新版目前是:0.53

ZenCoding.vim – vim plugins for HTML and CSS hi-speed coding. : vim online

介绍这个的文章已经相当多了,我这里简单说一下,备忘。
1,展开缩写

 ,

如:

html:xs

会被展开为:

[cc lang="html"]







div>p#foo$*3>a

会被展开为:
[cc lang="html"]

2.用标签包围

test1
test2
test3

,

会提示你输入Tag,如输入: ul>li*
就变成了:

[cc lang="html"]

  • test1
  • test2
  • test3

3,向内balance 标签
在插入模式下,要向内选择标签,用

d

[cc lang="html"]

    *

如果光标在*号的位置 ,d 会选择从<ul>到</ul>的区域
如果光标在第一个<li>那么它会选择<li class="list1"><li>

4,向外balance 标签
同样是在插入模式下,要向外选择标签,用

D

与上面的不同的是,
如果光标在*号那里,则会选择ul 后面的字符到</ul>前面的字符的区域。

5,跳到下一个编辑点
在插入模式下,

n

6,跳到上一个编辑点
在插入模式下,

N

7,展开或者更新img 标签的width , height 属性

i

8,合并多行
选择多行,然后按J(即此操作是在选择模式下进行的)

9,移除标签

k

10,分割/合并标签

j

11,添加/去除注释

/

12, 从URL生成锚标签

a

13, 从URL获取引用文本

A

另外,像等这些leaderkey 都是可以配置的,欲知详情请:

:h zencoding

文档:
https://raw.github.com/mattn/zencoding-vim/master/TUTORIAL

http://mattn.github.com/zencoding-vim/

Tagged in : VIM,plugin,zencoding,tool

All Comments (0)
Gravatar image
No Comments