上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@ 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 的东西，我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn
下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，{ms}了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。
先举一个复杂的例子：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 HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。
即使你不使用上面提到的编辑器，那么还有一种选择，点击下载页面的{zh1}一个链接： 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：选择一行
官方演示视频： 和 。另外，缩写的含义请看： 和 ，。
{zh1}提醒一点：，，还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。
下载：
P.S. 前端观察已经写了详细的教程
update: 多谢 SULei 的提醒：EditPlus 也有了，
50 Comments:
没有支持我用的编辑器！不知道会不会出Editplus版的
Editplus带有代码自动完成
prooly reply on 三月 8th, 2010,13:27:
在文本编辑的xx中，除了Vm/macs系，就是 TextMate的灵感激发了 。
为什么少了两个字母？应该是 Vim/Emacs
reply on 一月 25th, 2010,12:54:
@善用佳软, 请问你怎么配置vim达到写html+css的类似效果呢？
一七 reply on 二月 22nd, 2010,12:43:
假如我已经可以运指如飞不假思索的写HTML+CSS的话，我觉得我根本懒得（或者说无视）去使用这种软件，更要命的是我还得去学习它的语法！
@Windie Chai, 它的语法是和 CSS 几乎一样。根本没有学习难度。
reply on 一月 25th, 2010,12:37:
@Windie Chai, 是提高速度/效率的工具。。。。。
wander reply on 一月 25th, 2010,15:28:
@Windie Chai,
Html 还稍微机械化一点。但对于编程来说，真正的瓶颈并不在于这些“器”和这些奇技淫巧，而在于你的构思和布局，在于梳理和驾驭整体结构的能力。
“器”太快了，思路很可能（不排除有天才）跟不上。如果思路跟着手指走的话，恐怕写了半天回头一看，原来写了一堆乱糟糟的通心粉式的代码。回过头去再去整理这些结构混乱的代码，所费的时间恐怕还要多于原先写代码的时间…
所以，个人以为这些奇技淫巧当然是好的，但是对于真正的程序设计者（而非RAD式代码员），所能够节省的时间未必有想象中的那么多（且不提事先需要投入的学习成本）。毕竟，coder和designer不是一回事啊…
@xiaodiega
我倒是认为，使用更好的“器”去快速完成一些机械化的操作并不是单纯为了省录入时间。而是1减少大脑要考虑的东西，专注你的design，2避免手工出现的一些代级错误
reply on 一月 26th, 2010,12:31:
reply on 一月 26th, 2010,11:57:
@Windie Chai, 这个工具的威力在于以CSS语法为基础，这样你在编写HTML时只要习惯于用CSS思维思考即可，这并不是需要额外学习的东西
钢盅郭子 reply on 三月 10th, 2010,11:08:
囧……不支持EditPlus呀。。。
@砖家, EditPlus已经有人贡献了
SULei reply on 一月 26th, 2010,01:20:
一直用的scite,不知道什麼時候才有這個插件
本来准备爬高的,结果看到同类就聚合了
SomeOne reply on 一月 26th, 2010,09:57:
请问有没有详细将这个工具配置在gvim中的一个过程的教程，或者说gvim需要搭配什么插件与之相配呢？
@一七, 不支持 Vim
@sfufoet, 我看到似乎善用佳软就是用vim的啊？而博主的图片不也是用vim吗？
一七 reply on 二月 22nd, 2010,11:52:
reply on 二月 22nd, 2010,11:36:
@一七, 不是，图片是来自官方演示视频的截图。
@sfufoet, 请问官方演示的是用的什么软件及平台呢？
一七 reply on 二月 22nd, 2010,16:14:
reply on 二月 22nd, 2010,12:00:
@一七, 不清楚。好像是 Mac 下的编辑器。
reply on 二月 23rd, 2010,09:50: