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,展开缩写

1
 <C-Y>,

如:

1
html:xs

会被展开为:

[cc lang="html"]







1
div>p#foo$*3>a

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

2.用标签包围

test1
test2
test3

1
<C-Y>,

会提示你输入Tag,如输入:

1
 ul>li*

就变成了:

[cc lang="html"]

  • test1
  • test2
  • test3

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

1
<C-Y>d

[cc lang="html"]

    *

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

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

1
<C-Y>D

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

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

1
<C-Y>n

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

1
<C-Y>N

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

1
<C-Y>i

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

9,移除标签

1
<C-Y>k

10,分割/合并标签

1
<C-Y>j

11,添加/去除注释

1
<C-Y>/

12, 从URL生成锚标签

1
<C-Y>a

13, 从URL获取引用文本

1
<C-Y>A

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

1
:h zencoding

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

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

更多
3 Responses Post a comment
  1. surmise

    √ html +ccss
    × c , c++ , java, php , linux .................
    适用性太窄.

  2. 万戈

    zen Coding + notepad++ 的飘过,完美,哈哈

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS