Zen Coding – 超快地写网页代码

102
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes)
Loading...

上次在北京看到善用佳软的 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 试试吧。

网页版快捷键说明:

  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

已有 102 条评论, 我要留言

  1. QQ说道:

    必须坐沙发,太强大了

  2. 摩摩诘说道:

    牛逼大了。

  3. 灰机要考研说道:

    我不做网页,围观

  4. steen说道:

    没有editplus支持

  5. dkmilan说道:

    悲剧了。没一个我用的…

  6. bearcms说道:

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

  7. wqdsa说道:

    果然牛叉……必收……

  8. 君临天下说道:

    强悍,!!!

  9. 天毅说道:

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

  10. 什么是说道:

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

  11. scarSheep说道:

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

  12. 善用佳软说道:

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

  13. Windie Chai说道:

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

    • sfufoet说道:

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

    • wander说道:

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

    • xiaodiega说道:

      @Windie Chai,

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

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

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

      • laihj说道:

        @xiaodiega

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

    • 钢盅郭子说道:

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

  14. istef说道:

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

  15. 砖家说道:

    我cao,太牛X了!必须试一下

  16. 砖家说道:

    囧……不支持EditPlus呀。。。

  17. 刘老尸说道:

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

  18. colortext说道:

    这款太牛了。

  19. 盒子说道:

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

  20. 李二嫂的猪说道:

    让人想起 CodeSmith

  21. welee说道:

    这个太牛逼了!!

  22. 孩子说道:

    这个牛,真的很牛!

  23. 王小二说道:

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

  24. 海妖的夜说道:

    似乎列表里没notepad++啊

    • Ju2ender说道:

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

  25. gad/zllang说道:

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

  26. gad/zllang说道:

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

  27. thw说道:

    哇,果然强大!!

  28. gad/zllang说道:

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

  29. 小诺说道:

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

  30. Brandon说道:

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

  31. xifs说道:

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

  32. M说道:

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

  33. anear说道:

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

  34. anear说道:

    我发现我的回复看不见?

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

  36. nick说道:

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

  37. 我以前一直用hotstring说道:

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

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

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

  38. 推荐一个vim的xptempate说道:

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

  39. rzhome说道:

    牛B的无比强大。

  40. 天缘说道:

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

    • 不能飚车说道:

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

  41. gad/zllang说道:

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

  42. viperasi说道:

    这个强啊,这个强啊!!!

  43. 衣不如新说道:

    习惯用notepad2了

  44. godeye说道:

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

  45. 落寂无痕说道:

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

  46. 样样稀松说道:

    神奇无处不在

  47. fangfangma说道:

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

  48. test说道:

    相比之下,更喜欢emacs的yasnippet

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

  50. […] 其中光标会停留在注释的第二行上,输入类的说明文字以后再按一下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的插件。 […]

  51. 一七说道:

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

  52. jiazhoulvke说道:

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

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

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

  55. 落水的猫说道:

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

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

  57. 双鸭山说道:

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

  58. chchwy说道:

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

  59. dofy说道:

    才发现, 这得备一个…

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

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

  62. 说道:

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

  63. ahui说道:

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

  64. melook说道:

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

  65. 自由人说道:

    真强大啊。。。

  66. xieranmaya说道:

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

  67. AG说道:

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

  68. JASKNi说道:

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

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

  69. welpher.yu说道:

    强大的东东

  70. 海纳百川说道:

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

  71. 超级木木说道:

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

  72. 不错 我很喜欢这个

  73. 矢左说道:

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

  74. Daisy说道:

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

  75. uiuioo说道:

    Edge Code 有没有???

  76. lleohao说道:

    notepad++ 也有了

有不同想法?说说看