Home
Zen Coding – 超快地写网页代码

Zen Coding – 超快地写网页代码

实用工具 2010/01/25 95

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

下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

Zen Coding - 超快地写网页代码 1

先举一个复杂的例子：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 试试吧。

网页版快捷键说明：

  1. Ctrl + E：展开代码
  2. Ctrl + D：向外快速选中代码块
  3. Shift + Ctrl + D：向内快速选中代码块
  4. Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
  5. Ctrl + Alt+→ ：光标智能跳转到下一个编辑点（自己试试就知道多体贴了）
  6. Ctrl + Alt+←：光标智能跳转到上一个编辑点
  7. 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

分享

相关

, ,

95 条留言

  1. QQ 2010/01/25 回复

    必须坐沙发，太强大了

  2. 摩摩诘 2010/01/25 回复

    牛逼大了。

  3. 灰机要考研 2010/01/25 回复

    我不做网页，围观

  4. steen 2010/01/25 回复

    没有editplus支持

  5. dkmilan 2010/01/25 回复

    悲剧了。没一个我用的…

  6. bearcms 2010/01/25 回复

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

  7. wqdsa 2010/01/25 回复

    果然牛叉……必收……

  8. 君临天下 2010/01/25 回复

    强悍，！！！

  9. 天毅 2010/01/25 回复

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

  10. 什么是 2010/01/25 回复

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

    • prooly 2010/03/08 回复

      Editplus带有代码自动完成

    • dofy 2010/05/04 回复

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

      • iout.in 2012/05/31 回复

        @dofy, 支持eidtplus的，http://code.google.com/p/zen-coding/这里有它的插件

  11. scarSheep 2010/01/25 回复

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

  12. 善用佳软 2010/01/25 回复

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

    • 善用佳软 2010/01/25 回复

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

    • 一七 2010/02/22 回复

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

  13. Windie Chai 2010/01/25 回复

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

    • sfufoet 2010/01/25 回复

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

    • wander 2010/01/25 回复

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

    • xiaodiega 2010/01/26 回复

      @Windie Chai,

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

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

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

      • laihj 2010/01/26 回复

        @xiaodiega

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

    • 钢盅郭子 2010/03/10 回复

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

  14. istef 2010/01/25 回复

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

  15. 砖家 2010/01/25 回复

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

  16. 砖家 2010/01/25 回复

    囧……不支持EditPlus呀。。。

  17. 刘老尸 2010/01/25 回复

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

  18. colortext 2010/01/25 回复

    这款太牛了。

  19. 盒子 2010/01/25 回复

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

  20. 李二嫂的猪 2010/01/25 回复

    让人想起 CodeSmith

  21. welee 2010/01/25 回复

    这个太牛逼了！！

  22. 孩子 2010/01/25 回复

    这个牛，真的很牛！

  23. 王小二 2010/01/25 回复

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

  24. 海妖的夜 2010/01/25 回复

    似乎列表里没notepad++啊

    • Ju2ender 2012/01/06 回复

      @海妖的夜, Notepad++中可以的，在菜单选择Plugins >> Plugin Manager >> Show Plugin Manager，在打开的插件管理器中选择Available选项卡，在最后面找到Zen Coding – Python（是用Python实现的），勾选并按下Install按钮安装插件，在下载完成后会提示你是否重启Notepad++，选择是后等待NPP重启，重启完成后就可以使用拉轰的Zen Coding了，只不过展开缩写的快捷键不是Ctrl + , 。而是Ctrl + Alt + Enter，有些长 = =

  25. gad/zllang 2010/01/25 回复

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

  26. gad/zllang 2010/01/25 回复

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

    • Ju2ender 2012/01/06 回复

      @gad/zllang, Notepad++中可以用，解答看24楼

  27. thw 2010/01/25 回复

    哇，果然强大！！

  28. gad/zllang 2010/01/25 回复

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

  29. 小诺 2010/01/26 回复

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

  30. Brandon 2010/01/26 回复

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

  31. xifs 2010/01/26 回复

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

    • SomeOne 2010/01/26 回复

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

  32. M 2010/01/26 回复

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

  33. anear 2010/01/26 回复

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

  34. anear 2010/01/26 回复

    我发现我的回复看不见?

  36. Aptana/Eclipse中使用Zen Coding 2010/01/26 回复

    […] 在小众软件看到这篇Zen-coding的介绍文章： 下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。 […]

  37. nick 2010/01/26 回复

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

  38. 我以前一直用hotstring 2010/01/26 回复

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

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

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

  39. 推荐一个vim的xptempate 2010/01/26 回复

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

  40. rzhome 2010/01/26 回复

    牛B的无比强大。

  41. 天缘 2010/01/26 回复

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

    • 不能飚车 2011/11/16 回复

      应该打任何一个html就出来所有的属性和css，哈哈～～

  42. gad/zllang 2010/01/26 回复

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

  43. viperasi 2010/01/27 回复

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

  44. 衣不如新 2010/01/27 回复

    习惯用notepad2了

  45. godeye 2010/01/27 回复

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

  46. 落寂无痕 2010/01/29 回复

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

  47. 样样稀松 2010/01/30 回复

    神奇无处不在

  48. fangfangma 2010/02/01 回复

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

  49. test 2010/02/03 回复

    相比之下，更喜欢emacs的yasnippet

  50. Zen Coding – 超快地写网页代码 - Kwnsn的博客 2010/02/05 回复

    […] 4 个 li 代码了。没错，Zen Coding 就是这样牛叉的东西，Zen Coding 分为 Zen HTML 和 Zen CSS […]

  51. 拒绝折腾——好用的EmEditor | 大眼夹的鸟巢 2010/02/14 回复

    […] 其中光标会停留在注释的第二行上，输入类的说明文字以后再按一下Tab键，光标就会选中ClassName让你输入类名，再按下Tab键会选中extends AnotherClass，你可以选择地输入继承的类名……以此类推，通过按Tab键来依次修改这个预定义好的代码片段。再比如，我输入一个英文感叹号以后按下Tab键，它就会出现一个菜单，让我选择一种IE条件注释，例如我选择了IE6 only以后，它就会生成<!–[if IE 6]>     IE Conditional Comment: Internet Explorer 6 only   <![endif]–>。不过那种用写CSS选择器生成HTML代码的Zen Coding功能还没有，而且Zen Coding也没有EmEditor的插件。 […]

  52. 一七 2010/02/22 回复

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

    • sfufoet 2010/02/22 回复

      @一七, 不支持 Vim

      • 一七 2010/02/22 回复

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

    • sfufoet 2010/02/22 回复

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

      • 一七 2010/02/22 回复

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

    • sfufoet 2010/02/23 回复

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

  53. jiazhoulvke 2010/03/09 回复

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

  54. Zen Coding – 超快地写网页代码 | 小众软件 > 实用工具 | 学习.记录 2010/03/14 回复

    […] 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 Zen Coding 的东西，我强烈推荐给经常和 HTML CSS […]

  55. Zen Coding – 超快地写网页代码 | 小众软件 > 实用工具 | 学习.记录 2010/03/14 回复

    […] 下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。 tools” title=”Zen Coding 超快地写网页代码[图] | 小众软件 > tools”… […]

  56. 落水的猫 2010/03/19 回复

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

  57. 快速编写HTML、CSS代码利器－－Zen Coding « 痞子刘的幸福生活 2010/03/22 回复

    […] 快速编写HTML、CSS代码利器－－Zen Coding 0挖一下原文：http://www.appinn.com/zen-coding/ […]

  58. 双鸭山 2010/03/24 回复

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

  59. chchwy 2010/04/24 回复

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

  60. dofy 2010/05/03 回复

    才发现, 这得备一个…

  61. Firefox笔记：个人记录, 并非教程 | 善用佳软 2010/06/12 回复

    […] html code 模式。当然，不是手写html代码，而是借助对己有益，对人有 震撼效果 的 Vim。但是，Windows下的软件是缺乏沟通和集成的。所以，我被迫借助 […]

  62. 网易掌上邮来了，我要手机上网吗？[临] | 善用佳软 2010/06/13 回复

    […] 　　参加sohu年度新闻奖时（图文），所见年轻网友，皆手持智能机，上网不停、Twitter不息。顿感自己老而落后矣。 　　尽管我较远离新潮而偏近经典，尽管经典也能震撼新潮，尽管实用主义方面我不需要太多实时资讯，但也不能太过于自信，认为不直接接触而能了解大局，不使用新生事物而能保持心态年轻。 　　所以，立即将189号码封掉的上网功能开启。 　　然后，就发现Google Map的应用、Gmail 经常提示“内存不足”。就想到了换手机。sfufoet 和 scavin用黑莓，萧秋水也刚换用，是否自己也试一试呢？ […]

  63. 桃 2010/07/12 回复

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

    • sfufoet 2010/07/12 回复

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

    • xieranmaya 2011/04/08 回复

      @桃, 你这个有歧义,说话很可能结果不是你想要的.
      我试过类似的….

  64. ahui 2010/10/09 回复

    天啦，真是什么PHPASP语言都无法形容，那个*4吓到我了！

  65. melook 2010/12/30 回复

    lz 请问那个演示zen coding的黑色背景的编辑器是什么编辑器啊？我是菜鸟 不是很清楚这个，我想找个保护眼镜的编辑器

  66. 自由人 2011/03/14 回复

    真强大啊。。。

  67. xieranmaya 2011/04/08 回复

    我曾经想过为什么不让浏览器直接支持css的缩写.同时支持长写法用来兼容.
    好吧.看来我不用想了,已被zen css实现了..很好很强大!!!

  68. AG 2011/07/31 回复

    太牛X了！谢谢分享！我试试看！

  69. JASKNi 2011/10/11 回复

    最近用Sublime Text2, 本来好好的快捷输入, 在Win环境下就变成关闭/开启输入法了….

    看到这个有些心动, 但是我要克制住, 克制住…..

  70. welpher.yu 2011/12/05 回复

    强大的东东

  71. 海纳百川 2012/02/14 回复

    现在版本更新啦，之前的好像很多不对啊。

  72. 超级木木 2012/08/11 回复

    能自动编写代码就是一个前端开发的利器了吗？ html+css只是程序员编写的事情吗？
    dw的实时代码，流体布局，多终端编辑功能，还有JQmobile这些怎么办？完全不需要么？ 开玩笑

  73. 永不逝去的微笑 2012/09/20 回复

    不错 我很喜欢这个

  74. 矢左 2013/01/01 回复

    这个真是太强大了゜(⊙０⊙)

  75. Daisy 2013/04/01 回复

    zencoding现在改名叫Emmet了，官方document看这里哈http://docs.emmet.io/

  76. uiuioo 2013/05/08 回复

    Edge Code 有没有？？？

  77. lleohao 2014/08/04 回复

    notepad++ 也有了

  78. 黄梁一梦是千年 2017/05/02 回复

    sublime 用插件 Prefixr 也可以做得到。

写留言