上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@sfufoet 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 Zen Coding 的东西，我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn
下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。
![Zen Coding 超快地写网页代码[图] | 小众软件](http://img1.appinn.com/2010/01/zen-coding.gif "Zen Coding 超快地写网页代码[图] | 小众软件")
先举一个复杂的例子：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。
![Zen Coding 超快地写网页代码[图] | 小众软件](http://www.appinn.com/wp-content/down.gif "点击右侧的链接下载本软件")
下载：官方网站
P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码
update: 多谢 SULei 的提醒：EditPlus 也有了，zen code for EditPlus
62 Comments:
必须坐沙发，太强大了
回复
牛逼大了。
回复
我不做网页，围观
回复
没有editplus支持
回复
悲剧了。没一个我用的…
回复
沙发
类似编程的方法写html和css
很提高速度!
回复
果然牛叉……必收……
回复
强悍，！！！
回复
vim也有类似的功能，phraseexpress也可以，不过应该是这个软件更专注于html和css吧
回复
没有支持我用的编辑器！不知道会不会出Editplus版的
回复
Editplus带有代码自动完成
回复
@什么是, EditPlus 的自动完成也不错, 但是没这么灵活, 得自己调教一下…
回复
有aptana的话,应该eclipse也会支持吧…这下爽了
回复
在文本编辑的神器中，除了Vm/macs系，就是 TextMate的灵感激发了 。
回复
为什么少了两个字母？应该是 Vim/Emacs
回复
@善用佳软, 请问你怎么配置vim达到写html+css的类似效果呢？
回复
@一七, 争取尽快写一篇文章吧。
假如我已经可以运指如飞不假思索的写HTML+CSS的话，我觉得我根本懒得（或者说无视）去使用这种软件，更要命的是我还得去学习它的语法！
回复
@Windie Chai, 它的语法是和 CSS 几乎一样。根本没有学习难度。
回复
@Windie Chai, 是提高速度/效率的工具。。。。。
回复
@Windie Chai,
Html 还稍微机械化一点。但对于编程来说，真正的瓶颈并不在于这些“器”和这些奇技淫巧，而在于你的构思和布局，在于梳理和驾驭整体结构的能力。
“器”太快了，思路很可能（不排除有天才）跟不上。如果思路跟着手指走的话，恐怕写了半天回头一看，原来写了一堆乱糟糟的通心粉式的代码。回过头去再去整理这些结构混乱的代码，所费的时间恐怕还要多于原先写代码的时间…
所以，个人以为这些奇技淫巧当然是好的，但是对于真正的程序设计者（而非RAD式代码员），所能够节省的时间未必有想象中的那么多（且不提事先需要投入的学习成本）。毕竟，coder和designer不是一回事啊…
回复
@xiaodiega
我倒是认为，使用更好的“器”去快速完成一些机械化的操作并不是单纯为了省录入时间。而是1减少大脑要考虑的东西，专注你的design，2避免手工出现的一些代级错误
@Windie Chai, 这个工具的威力在于以CSS语法为基础，这样你在编写HTML时只要习惯于用CSS思维思考即可，这并不是需要额外学习的东西
回复
Zen 其实就是用 CSS 的语法在写 HTML，不过确实非常高效，从老早就开始用了。配上 Coda 或 Espresso 都极好用。我最喜欢的code 就是 html:xs 了，哈哈哈
回复
我cao，太牛X了！必须试一下
回复
囧……不支持EditPlus呀。。。
回复
@砖家, EditPlus已经有人贡献了 http://www.vfresh.org/w3c/667
回复
@SULei, 这个链接是不是要 □□□ 啊，怎么链接后看到的是奇怪的页面。
求vim在Windows下使用该类型插件的方法
回复
这款太牛了。
回复
牛，要是支持VS就好了-_-!
回复
让人想起 CodeSmith
回复
这个太牛逼了！！
回复
这个牛，真的很牛！
回复
Ed的auto-complete自己配过，写写html+css速度还行；
不过，这个确实拉风。看截图是支持vim的，但是在官方找不到想应得插件啊。。xbeta能不能解释下
回复
似乎列表里没notepad++啊
回复
@海妖的夜, Notepad++中可以的，在菜单选择Plugins >> Plugin Manager >> Show Plugin Manager，在打开的插件管理器中选择Available选项卡，在最后面找到Zen Coding – Python（是用Python实现的），勾选并按下Install按钮安装插件，在下载完成后会提示你是否重启Notepad++，选择是后等待NPP重启，重启完成后就可以使用拉轰的Zen Coding了，只不过展开缩写的快捷键不是Ctrl + , 。而是Ctrl + Alt + Enter，有些长 = =
回复
notepad++,不行的话,换个编辑器也得试试
回复
闷了,,,notepad++不行,看着那支持列表里,还有个gedit看着面熟, 装了个,,插件倒是装上了,,是灰的 看插件用python写的,顺便又装了个python,,郁闷,还是灰的……无语了
回复
@gad/zllang, Notepad++中可以用，解答看24楼
回复
哇，果然强大！！
回复
悲剧了,装了个sublime 竟然还没用上
回复
说实话，作为一个 vim user， 不喜欢这个。
回复
不就是abbr么。。vim自带的。。
回复
一直用的scite,不知道什麼時候才有這個插件
回复
本来准备爬高的,结果看到同类就聚合了
回复
非常强大 用上了
文中说的快捷键是网页版的 我没留意 在APTANA里用这些快捷键都不对 仔细查看 才发现应该用COMMAND+E
回复
强悍,不过要熟悉操作,估计得需要点时间适应了
回复
我发现我的回复看不见?
回复
emacs有yasnippet
http://www.laihj.net/2010/01/code-complete-yasnippet/
回复
eclipse的模版功能就可以实现这个效果
回复
直接用hotstring
映射tab为f3
在hotstring中插入一个特殊字符，并在结尾写上｛f3}特殊字符会车
当然应该可以有更高级的办法
不过后来知道用vim的插件了，xptemplate
但是还是一直觉得ahk的hotstring其实应该本身就拥有这个功能才对
回复
国人开发，号称终极snippet解决方案
不过没有这个Zen Coding的那个直接输入“4”生成4行代码的功能，不过它也提供一种更简单更流畅的重复插入snippet的功能
也可以实现切套snippet
哎，说不清楚
http://www.vim.org/scripts/script.php?script_id=26
回复
牛B的无比强大。
回复
这个太厉害了，应该打个HTML就把框架全出来，哈哈
回复
应该打任何一个html就出来所有的属性和css，哈哈～～
回复
这是我第四个回复了,终于明白为什么以前那gedit插件用不了了.
在cnbeta上看到gedit 2.29.4 刚发布,简介里面说道”python 版的插件终于可以在 windows 下使用了…….”
无语….今天终于给装上了..
回复
这个强啊，这个强啊！！！
回复
习惯用notepad2了
回复
eclipse中li*4无用,其他正常,求解
回复
非常好的东西，对于我们初学者来说真的太方便 了
回复
神奇无处不在
回复
寻找规范化网页源码软件 ，在小众中的某个地方看见过，现在要用的时候怎么也找不到了。请问一下是什么软件，好像是sourceforge的项目。
回复
相比之下，更喜欢emacs的yasnippet
回复
请问有没有详细将这个工具配置在gvim中的一个过程的教程，或者说gvim需要搭配什么插件与之相配呢？
回复
@一七, 不支持 Vim
回复
@sfufoet, 我看到似乎善用佳软就是用vim的啊？而博主的图片不也是用vim吗？
@一七, 不是，图片是来自官方演示视频的截图。
回复
@sfufoet, 请问官方演示的是用的什么软件及平台呢？
@一七, 不清楚。好像是 Mac 下的编辑器。
回复
现在vim也可以用Zen-coding了，http://www.vim.org/scripts/script.php?script_id=2981
回复
看着也不是很好用，因为还得记它特定的语法
回复
太牛了，真的好强大，喜欢，下载一下了，试一下
回复
在notepad++上面還不支持non-ascii 文字，意思是文檔中如果出現中文字，那麼插件就會失效，不支啥時才能修好這個bug。
回复
才发现, 这得备一个…
回复
输入了div#page>div.logo+ul#navigation>li*5>a 没反映呢。。。难道说输入了之后还要按什么快捷键么
回复
@桃, 把光标定位到文本框里面，按下 Ctrl + E 试试吧。
回复
@桃, 你这个有歧义,说话很可能结果不是你想要的.
我试过类似的….
回复
天啦，真是什么PHPASP语言都无法形容，那个*4吓到我了！
回复
lz 请问那个演示zen coding的黑色背景的编辑器是什么编辑器啊？我是菜鸟 不是很清楚这个，我想找个保护眼镜的编辑器
回复
@melook, vim 可以自定义颜色。
回复
真强大啊。。。
回复
我曾经想过为什么不让浏览器直接支持css的缩写.同时支持长写法用来兼容.
好吧.看来我不用想了,已被zen css实现了..很好很强大!!!
回复
太牛X了！谢谢分享！我试试看！
回复
最近用Sublime Text2, 本来好好的快捷输入, 在Win环境下就变成关闭/开启输入法了….
看到这个有些心动, 但是我要克制住, 克制住…..
回复
强大的东东
回复
8 Trackbacks