vim中用Zen Coding编写HTML

在vim里编写HTML,zencoding.vim是一个非常理想的插件

vim.org主页:http://www.vim.org/scripts/script.php?script_id=2981

安装方法:

cd ~/.vim

unzip zencoding-vim.zip

还有其他安装方法,可以参考主页里的方法和本页14点

使用方法:基本上是英文版的翻译

1 展开缩写

输入 div>p#foo$*3>a,按下’,'

结果

<div>
<p id="foo1">
<a href=""></a>
</p>
<p id="foo2">
<a href=""></a>
</p>
<p id="foo3">
<a href=""></a>
</p>
</div>

2 嵌套代码

输入


test1
test2
test3 ---------------------

然后用shift+v把所有的代码选中,按下’,'

在状态栏下会有Tag:提示,输入ul>li*
结果

  • test1
  • test2
  • test3

如果在Tag:提示附近输入 blockquote
结果


test1 test2 test3

3 选择下一层标签 ,输入模式下输入d 4 **选择上一层标签**,输入模式下输入D 5 **移动到下一个编辑点**,输入模式下输入n 6 **移动到上一个编辑点**,输入模式下输入N 7 **更新img大小** 移动光标到

---------------------
<img src="foo.png" />
---------------------

输入i,编辑大小,得到结果

---------------------
<img src="foo.png" width="32" height="48" />
---------------------

8 合并行

---------------------
<ul>
<li></li>
<li></li>
<li></li>
</ul>
---------------------

选择其中的任意一个包含<li> 标签的行,按下“J” ,结果

---------------------
<ul>
<li></li><li></li><li></li>
</ul>
---------------------

9 移除tag
将光标移动到块上

---------------------
<div>
<a>cursor is here</a>
</div>
---------------------

输入’k',结果

---------------------
<div>

</div>
---------------------

原地不动地输入’j',结果

---------------------

--------------------- 啥也没有了吧

10 切割和组合Tag

移动光标至block块 ——————— <div class="foo"> cursor is here </div> ——————— 输入模式下输入’j' --------------------- <div class="foo"/> --------------------- 原地不动地在输入'j' --------------------- <div class="foo"> </div> ---------------------

11 将代码转换成注释

移动光标至需要修改的块 ——————— <div> hello world </div> ——————— 输入模式下输入 ‘/' --------------------- --------------------- 原地不动地再输入 '/',看,又回来了 --------------------- <div> hello world </div> ---------------------

12 将URL装换成引用

输入一个http://格式的链接 ——————— http://www.google.com/ ——————— 输入 ‘a',结果 --------------------- Google ---------------------

13 从URL中创建引用的文本 ——————— http://github.com/ ——————— 输入 ‘A',自动在网络上查询必要的资源并显示,怎么样,方便吧 --------------------- <blockquote> Secure source code hosting and collaborative development - GitHub
<p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p> http://github.com/ </blockquote> ---------------------

14 安装zencoding.vim

# cd ~/.vim
# unzip zencoding-vim.zip
    or if you install pathogen.vim:
# cd ~/.vim/bundle # or make directory
# unzip /path/to/zencoding-vim.zip
    if you get sources from repository:
# cd ~/.vim/bundle # or make directory
# git clone http://github.com/mattn/zencoding-vim.git

15 定制

---------------------
# cat >> ~/.vimrc
    let g:user_zen_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}
---------------------
  let g:user_zen_expandabbr_key = '<c-e>'//即"<c-y>,"都变成<c-e>了

  let g:use_zen_complete_tag = 1