ZenCoding.vim : [超速编写网页代码]vim plugins for HTML and CSS hi-speed coding.
先看效果图： 
英文版:
http://www.vim.org/scripts/script.php?script_id=2981
created by
Yasuhiro Matsumoto
script type
utility
description
This is vim script support expanding abbreviation like zen-coding.
ref: http://code.google.com/p/zen-coding/
There is a movie using zencoding.vim
ref: http://mattn.github.com/zencoding-vim
Source Repository.
ref: http://github.com/mattn/zencoding-vim
Type abbreviation
+-------------------------------------
| html:5_
+-------------------------------------
"_" is a cursor position. and type "<c-y>," (Ctrl + y and Comma)
NOTE: Don't worry about key map. you can change it easily.
+-------------------------------------
| <!DOCTYPE HTML>
| <html lang="en">
| <head>
| <title></title>
| <meta charset="UTF-8">
| </head>
| <body>
| _
| </body>
| </html>
+-------------------------------------
Type following
+-------------------------------------
| div#foo$*2>div.bar
+-------------------------------------
And type "<c-y>,"
+-------------------------------------
|<div id="foo1">
| <div class="bar">_</div>
|</div>
|<div id="foo2">
| <div class="bar"></div>
|</div>
| _
+-------------------------------------
Tutorial:
http://github.com/mattn/zencoding-vim/raw/master/TUTORIAL
How work this:
http://mattn.github.com/zencoding-vim
Tips:
You can customize behavior of expanding with overriding config.
This configuration will be marged at loading plugin.
let g:user_zen_settings = {
\ 'indentation' : ' ',
\ 'perl' : {
\ 'aliases' : {
\ 'req' : 'require '
\ },
\ 'snippets' : {
\ 'use' : "use strict\nuse warnings\n\n",
\ 'warn' : "warn \"|\";",
\ }
\ }
\}
let g:user_zen_expandabbr_key = '<c-e>'
let g:use_zen_complete_tag = 1
You can set language attribute in html using zen_settings['lang'].
install details
# 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
中文版:
VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能, 这个VIM插件叫 Zen Coding , 我强烈推荐给经常和 HTML CSS 打交道的朋友。
下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。
33.gif
先举一个复杂的例子：zen-coding 可以把这样的代码：div#header>ul.navigation>li*4>a，变成下面的 HTML 代码
<div id=”header”>
<ul class=”navigation”>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
</ul>
</div>
看到这熟悉的语法结构，会 CSS 的朋友一定会惊声尖叫！最妙的是那个“*4”，直接生成 4 个 li 代码了。没错，Zen Coding 就是这样牛叉的东西，Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。
即使你不使用上面提到的编辑 器，那么还有一种选择，点击下载页面的最后一个链接： Zen Coding for <textarea>。这是一个网页版的 Zen Coding！打开 example.html 之后，把光标定位到文本框里面，按下 Ctrl + E 试试吧。
网页版快捷键说明：
Ctrl + E：展开代码
Ctrl + D：向外快速选中代码块
Shift + Ctrl + D：向内快速选中代码块
Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
Ctrl + Alt+→ ：光标智能跳转到下一个编辑点（自己试试就知道多体贴了）
Ctrl + Alt+←：光标智能跳转到上一个编辑点
Ctrl + L：选择一行
官方演示视频：Zen CSS 和 Zen HTML。
另外，缩写的含义请看：Zen CSS Properties 和 Zen HTML Elements，各种插件的安装方法请看官方 wiki。
最后提醒一点：
在这个墙外的官方演示视频(高清)中，墙内观看地址，还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。
版权声明：除非注明，本文由( blogdaren )原创，转载请保留文章出处。
本文链接：ZenCoding.vim : [超速编写网页代码]vim plugins for HTML and CSS hi-speed coding.
发表评论: