Zen Coding – WEB前端开发利器
上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@sfufoet 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它能够折腾出不少种强大的功能。今天看到这个叫 Zen Coding 的东西，我强烈推荐给常常和 HTML CSS 打交道的朋友。@appinncss
下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各类快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各类复杂而枯燥的 HTML 和 CSS 代码的体验。html
先举一个复杂的例子：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>vim
看到这熟悉的语法结构，会 CSS 的朋友必定会惊声尖叫！最妙的是那个“*4”，直接生成 4 个 li 代码了。没错，Zen Coding 就是这样牛叉的东西，Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。若是你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 均可以在官方下载页面找到相关的插件。app
即便你不使用上面提到的编辑器，那么还有一种选择，点击下载页面的最后一个连接： 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 。google
最后提醒一点：在这个墙外的官方演示视频(高清)中 ，墙内观看地址 ，还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。spa
下载：官方网站 .net
P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码