Zen Coding – 超快地写网页代码

上次在北京看到善用佳软的 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 CSSZen HTML。另外,缩写的含义请看:Zen CSS PropertiesZen HTML Elements各种插件的安装方法请看官方 wiki

最后提醒一点:在这个墙外的官方演示视频(高清)中墙内观看地址,还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。

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

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

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

95 Comments

  1. QQ 2010/01/25 Reply
  2. 摩摩诘 2010/01/25 Reply
  3. steen 2010/01/25 Reply
  4. dkmilan 2010/01/25 Reply
  5. bearcms 2010/01/25 Reply
  6. wqdsa 2010/01/25 Reply
  7. 君临天下 2010/01/25 Reply
  8. 天毅 2010/01/25 Reply
  9. 什么是 2010/01/25 Reply
    • prooly 2010/03/08 Reply
    • dofy 2010/05/04 Reply
      • iout.in 2012/05/31 Reply
  10. scarSheep 2010/01/25 Reply
  11. 善用佳软 2010/01/25 Reply
    • 善用佳软 2010/01/25 Reply
    • 一七 2010/02/22 Reply
  12. Windie Chai 2010/01/25 Reply
    • sfufoet 2010/01/25 Reply
    • wander 2010/01/25 Reply
    • xiaodiega 2010/01/26 Reply
      • laihj 2010/01/26 Reply
    • 钢盅郭子 2010/03/10 Reply
  13. istef 2010/01/25 Reply
  14. 砖家 2010/01/25 Reply
  15. 砖家 2010/01/25 Reply
    • SULei 2010/01/26 Reply
      • Ju2ender 2012/01/06 Reply
  16. 刘老尸 2010/01/25 Reply
  17. colortext 2010/01/25 Reply
  18. 盒子 2010/01/25 Reply
  19. welee 2010/01/25 Reply
  20. 孩子 2010/01/25 Reply
  21. 王小二 2010/01/25 Reply
  22. 海妖的夜 2010/01/25 Reply
    • Ju2ender 2012/01/06 Reply
  23. gad/zllang 2010/01/25 Reply
  24. gad/zllang 2010/01/25 Reply
    • Ju2ender 2012/01/06 Reply
  25. thw 2010/01/25 Reply
  26. gad/zllang 2010/01/25 Reply
  27. 小诺 2010/01/26 Reply
  28. Brandon 2010/01/26 Reply
  29. xifs 2010/01/26 Reply
    • SomeOne 2010/01/26 Reply
  30. M 2010/01/26 Reply
  31. anear 2010/01/26 Reply
  32. anear 2010/01/26 Reply
  33. nick 2010/01/26 Reply
  34. 我以前一直用hotstring 2010/01/26 Reply
  35. 推荐一个vim的xptempate 2010/01/26 Reply
  36. rzhome 2010/01/26 Reply
  37. 天缘 2010/01/26 Reply
    • 不能飚车 2011/11/16 Reply
  38. gad/zllang 2010/01/26 Reply
  39. viperasi 2010/01/27 Reply
  40. 衣不如新 2010/01/27 Reply
  41. godeye 2010/01/27 Reply
  42. 落寂无痕 2010/01/29 Reply
  43. 样样稀松 2010/01/30 Reply
  44. fangfangma 2010/02/01 Reply
  45. test 2010/02/03 Reply
  46. 一七 2010/02/22 Reply
    • sfufoet 2010/02/22 Reply
      • 一七 2010/02/22 Reply
    • sfufoet 2010/02/22 Reply
      • 一七 2010/02/22 Reply
    • sfufoet 2010/02/23 Reply
  47. jiazhoulvke 2010/03/09 Reply
  48. 落水的猫 2010/03/19 Reply
  49. 双鸭山 2010/03/24 Reply
  50. chchwy 2010/04/24 Reply
  51. dofy 2010/05/03 Reply
  52. 2010/07/12 Reply
    • sfufoet 2010/07/12 Reply
    • xieranmaya 2011/04/08 Reply
  53. ahui 2010/10/09 Reply
  54. melook 2010/12/30 Reply
  55. 自由人 2011/03/14 Reply
  56. xieranmaya 2011/04/08 Reply
  57. AG 2011/07/31 Reply
  58. JASKNi 2011/10/11 Reply
  59. welpher.yu 2011/12/05 Reply
  60. 海纳百川 2012/02/14 Reply
  61. 超级木木 2012/08/11 Reply
  62. 矢左 2013/01/01 Reply
  63. Daisy 2013/04/01 Reply
  64. uiuioo 2013/05/08 Reply
  65. lleohao 2014/08/04 Reply
  66. 黄梁一梦是千年 2017/05/02 Reply

Leave a Reply