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.
发表评论: