Zen Coding – 超快地写网页代码

上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@sfufoet 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 Zen Coding 的东西，我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn

下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 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 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。

小众软件下载下载：官方网站

P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码

update: 多谢 SULei 的提醒：EditPlus 也有了，zen code for EditPlus

55 Comments:

1. QQ said on: 2010/01/25 09:29

必须坐沙发，太强大了

赞(0)反对 (0)

回复
2. 摩摩诘 said on: 2010/01/25 09:31

牛逼大了。

赞(0)反对 (0)

回复
3. 灰机要考研 said on: 2010/01/25 09:38

我不做网页，围观

赞(0)反对 (0)

回复
4. steen said on: 2010/01/25 09:44

没有editplus支持

赞(0)反对 (0)

回复
5. dkmilan said on: 2010/01/25 09:57

悲剧了。没一个我用的…

赞(0)反对 (0)

回复
6. bearcms said on: 2010/01/25 10:20

沙发
类似编程的方法写html和css
很提高速度!

赞(0)反对 (0)

回复
7. wqdsa said on: 2010/01/25 10:49

果然牛叉……必收……

赞(0)反对 (0)

回复
8. 君临天下 said on: 2010/01/25 11:01

强悍，！！！

赞(0)反对 (0)

回复
9. 天毅 said on: 2010/01/25 11:23

vim也有类似的功能，phraseexpress也可以，不过应该是这个软件更专注于html和css吧

赞(0)反对 (0)

回复
10. 什么是 said on: 2010/01/25 11:32

没有支持我用的编辑器！不知道会不会出Editplus版的

赞(0)反对 (0)

回复
Editplus带有代码自动完成

赞(0)反对 (0)

回复
prooly reply on 三月 8th, 2010,13:27:

@什么是, EditPlus 的自动完成也不错, 但是没这么灵活, 得自己调教一下…

赞(0)反对 (0)

回复
dofy reply on 五月 4th, 2010,00:01:
11. scarSheep said on: 2010/01/25 11:41

有aptana的话,应该eclipse也会支持吧…这下爽了

赞(0)反对 (0)

回复
12. 善用佳软 said on: 2010/01/25 12:03

在文本编辑的神器中，除了Vm/macs系，就是 TextMate的灵感激发了。

赞(0)反对 (0)

回复
为什么少了两个字母？应该是 Vim/Emacs

赞(0)反对 (0)

回复
善用佳软 reply on 一月 25th, 2010,12:54:

@善用佳软, 请问你怎么配置vim达到写html+css的类似效果呢？

赞(0)反对 (0)

回复
@一七, 争取尽快写一篇文章吧。

赞(0)反对 (0)

善用佳软 reply on 二月 23rd, 2010,07:07:

一七 reply on 二月 22nd, 2010,12:43:
13. Windie Chai said on: 2010/01/25 12:19

假如我已经可以运指如飞不假思索的写HTML+CSS的话，我觉得我根本懒得（或者说无视）去使用这种软件，更要命的是我还得去学习它的语法！

赞(0)反对 (1)

回复
@Windie Chai, 它的语法是和 CSS 几乎一样。根本没有学习难度。

赞(0)反对 (0)

回复
sfufoet reply on 一月 25th, 2010,12:37:

@Windie Chai, 是提高速度/效率的工具。。。。。

赞(0)反对 (0)

回复
wander reply on 一月 25th, 2010,15:28:

@Windie Chai,

Html 还稍微机械化一点。但对于编程来说，真正的瓶颈并不在于这些“器”和这些奇技淫巧，而在于你的构思和布局，在于梳理和驾驭整体结构的能力。

“器”太快了，思路很可能（不排除有天才）跟不上。如果思路跟着手指走的话，恐怕写了半天回头一看，原来写了一堆乱糟糟的通心粉式的代码。回过头去再去整理这些结构混乱的代码，所费的时间恐怕还要多于原先写代码的时间…

所以，个人以为这些奇技淫巧当然是好的，但是对于真正的程序设计者（而非RAD式代码员），所能够节省的时间未必有想象中的那么多（且不提事先需要投入的学习成本）。毕竟，coder和designer不是一回事啊…

赞(0)反对 (0)

回复
@xiaodiega

我倒是认为，使用更好的“器”去快速完成一些机械化的操作并不是单纯为了省录入时间。而是1减少大脑要考虑的东西，专注你的design，2避免手工出现的一些代级错误

赞(0)反对 (0)

laihj reply on 一月 26th, 2010,12:31:

xiaodiega reply on 一月 26th, 2010,11:57:

@Windie Chai, 这个工具的威力在于以CSS语法为基础，这样你在编写HTML时只要习惯于用CSS思维思考即可，这并不是需要额外学习的东西

赞(0)反对 (0)

回复
钢盅郭子 reply on 三月 10th, 2010,11:08:
14. istef said on: 2010/01/25 12:56

Zen 其实就是用 CSS 的语法在写 HTML，不过确实非常高效，从老早就开始用了。配上 Coda 或 Espresso 都极好用。我最喜欢的code 就是 html:xs 了，哈哈哈

赞(0)反对 (0)

回复
15. 砖家 said on: 2010/01/25 13:04

我cao，太牛X了！必须试一下

赞(0)反对 (0)

回复
16. 砖家 said on: 2010/01/25 13:06

囧……不支持EditPlus呀。。。

赞(0)反对 (0)

回复
@砖家, EditPlus已经有人贡献了 http://www.vfresh.org/w3c/667

赞(0)反对 (0)

回复
SULei reply on 一月 26th, 2010,01:20:
17. 刘老尸 said on: 2010/01/25 13:17

求vim在Windows下使用该类型插件的方法

赞(0)反对 (0)

回复
18. colortext said on: 2010/01/25 13:32

这款太牛了。

赞(0)反对 (0)

回复
19. 盒子 said on: 2010/01/25 13:54

牛，要是支持VS就好了-_-!

赞(0)反对 (0)

回复
20. 李二嫂的猪 said on: 2010/01/25 14:11

让人想起 CodeSmith

赞(0)反对 (0)

回复
21. welee said on: 2010/01/25 15:00

这个太牛逼了！！

赞(0)反对 (0)

回复
22. 孩子 said on: 2010/01/25 15:54

这个牛，真的很牛！

赞(0)反对 (0)

回复
23. 王小二 said on: 2010/01/25 16:04

Ed的auto-complete自己配过，写写html+css速度还行；
不过，这个确实拉风。看截图是支持vim的，但是在官方找不到想应得插件啊。。xbeta能不能解释下

赞(0)反对 (0)

回复
24. 海妖的夜 said on: 2010/01/25 16:07

似乎列表里没notepad++啊

赞(0)反对 (0)

回复
25. gad/zllang said on: 2010/01/25 19:22

notepad++,不行的话,换个编辑器也得试试

赞(0)反对 (0)

回复
26. gad/zllang said on: 2010/01/25 20:47

闷了,,,notepad++不行,看着那支持列表里,还有个gedit看着面熟, 装了个,,插件倒是装上了,,是灰的看插件用python写的,顺便又装了个python,,郁闷,还是灰的……无语了

赞(0)反对 (0)

回复
27. thw said on: 2010/01/25 20:55

哇，果然强大！！

赞(0)反对 (0)

回复
28. gad/zllang said on: 2010/01/25 21:15

悲剧了,装了个sublime 竟然还没用上

赞(0)反对 (0)

回复
29. 小诺 said on: 2010/01/26 00:07

说实话，作为一个 vim user，不喜欢这个。

赞(0)反对 (0)

回复
30. Brandon said on: 2010/01/26 09:17

不就是abbr么。。vim自带的。。

赞(0)反对 (0)

回复
31. xifs said on: 2010/01/26 09:41

一直用的scite,不知道什麼時候才有這個插件

赞(0)反对 (0)

回复
本来准备爬高的,结果看到同类就聚合了

赞(0)反对 (0)

回复
SomeOne reply on 一月 26th, 2010,09:57:
32. M said on: 2010/01/26 11:39

非常强大用上了
文中说的快捷键是网页版的我没留意在APTANA里用这些快捷键都不对仔细查看才发现应该用COMMAND+E

赞(0)反对 (0)

回复
33. anear said on: 2010/01/26 12:16

强悍,不过要熟悉操作,估计得需要点时间适应了

赞(0)反对 (0)

回复
34. anear said on: 2010/01/26 12:17

我发现我的回复看不见?

赞(0)反对 (0)

回复
35. laihj said on: 2010/01/26 12:33

emacs有yasnippet

http://www.laihj.net/2010/01/code-complete-yasnippet/

赞(0)反对 (0)

回复
36. nick said on: 2010/01/26 16:19

eclipse的模版功能就可以实现这个效果

赞(0)反对 (0)

回复
37. 我以前一直用hotstring said on: 2010/01/26 18:03

直接用hotstring
映射tab为f3
在hotstring中插入一个特殊字符，并在结尾写上｛f3}特殊字符会车
当然应该可以有更高级的办法

不过后来知道用vim的插件了，xptemplate

但是还是一直觉得ahk的hotstring其实应该本身就拥有这个功能才对

赞(0)反对 (0)

回复
38. 推荐一个vim的xptempate said on: 2010/01/26 18:16

国人开发，号称终极snippet解决方案
不过没有这个Zen Coding的那个直接输入“4”生成4行代码的功能，不过它也提供一种更简单更流畅的重复插入snippet的功能
也可以实现切套snippet
哎，说不清楚
http://www.vim.org/scripts/script.php?script_id=26

赞(0)反对 (0)

回复
39. rzhome said on: 2010/01/26 18:45

牛B的无比强大。

赞(0)反对 (0)

回复
40. 天缘 said on: 2010/01/26 22:35

这个太厉害了，应该打个HTML就把框架全出来，哈哈

赞(0)反对 (0)

回复
41. gad/zllang said on: 2010/01/26 23:58

这是我第四个回复了,终于明白为什么以前那gedit插件用不了了.
在cnbeta上看到gedit 2.29.4 刚发布,简介里面说道”python 版的插件终于可以在 windows 下使用了…….”
无语….今天终于给装上了..

赞(0)反对 (0)

回复
42. viperasi said on: 2010/01/27 11:40

这个强啊，这个强啊！！！

赞(0)反对 (0)

回复
43. 衣不如新 said on: 2010/01/27 12:45

习惯用notepad2了

赞(0)反对 (0)

回复
44. godeye said on: 2010/01/27 17:47

eclipse中li*4无用,其他正常,求解

赞(0)反对 (0)

回复
45. 落寂无痕 said on: 2010/01/29 11:32

非常好的东西，对于我们初学者来说真的太方便了

赞(0)反对 (0)

回复
46. 样样稀松 said on: 2010/01/30 20:22

神奇无处不在

赞(0)反对 (0)

回复
47. fangfangma said on: 2010/02/01 17:47

寻找规范化网页源码软件，在小众中的某个地方看见过，现在要用的时候怎么也找不到了。请问一下是什么软件，好像是sourceforge的项目。

赞(0)反对 (0)

回复
48. test said on: 2010/02/03 11:46

相比之下，更喜欢emacs的yasnippet

赞(0)反对 (0)

回复
49. 一七 said on: 2010/02/22 11:29

请问有没有详细将这个工具配置在gvim中的一个过程的教程，或者说gvim需要搭配什么插件与之相配呢？

赞(0)反对 (0)

回复
@一七, 不支持 Vim

赞(0)反对 (0)

回复
@sfufoet, 我看到似乎善用佳软就是用vim的啊？而博主的图片不也是用vim吗？

赞(0)反对 (0)

一七 reply on 二月 22nd, 2010,11:52:

sfufoet reply on 二月 22nd, 2010,11:36:

@一七, 不是，图片是来自官方演示视频的截图。

赞(0)反对 (0)

回复
@sfufoet, 请问官方演示的是用的什么软件及平台呢？

赞(0)反对 (0)

一七 reply on 二月 22nd, 2010,16:14:

sfufoet reply on 二月 22nd, 2010,12:00:

@一七, 不清楚。好像是 Mac 下的编辑器。

赞(0)反对 (0)

回复
sfufoet reply on 二月 23rd, 2010,09:50:
50. jiazhoulvke said on: 2010/03/09 22:58

现在vim也可以用Zen-coding了，http://www.vim.org/scripts/script.php?script_id=2981

赞(1)反对 (0)

回复
51. 落水的猫 said on: 2010/03/19 17:56

看着也不是很好用，因为还得记它特定的语法

赞(0)反对 (0)

回复
52. 双鸭山 said on: 2010/03/24 10:59

太牛了，真的好强大，喜欢，下载一下了，试一下

赞(0)反对 (0)

回复
53. chchwy said on: 2010/04/24 22:58

在notepad++上面還不支持non-ascii 文字，意思是文檔中如果出現中文字，那麼插件就會失效，不支啥時才能修好這個bug。

赞(0)反对 (0)

回复
54. dofy said on: 2010/05/03 23:59

才发现, 这得备一个…

赞(0)反对 (0)

回复
55. 桃 said on: 2010/07/12 09:47

输入了div#page>div.logo+ul#navigation>li*5>a 没反映呢。。。难道说输入了之后还要按什么快捷键么

赞(0)反对 (0)

回复
@桃, 把光标定位到文本框里面，按下 Ctrl + E 试试吧。

赞(0)反对 (0)

回复
sfufoet reply on 七月 12th, 2010,21:05:

小众软件