[Tool]Zen-coding : Set of plugins for HTML and CSS hi-speed coding

[Tool]zen-coding : Set of plugins for HTML and CSS hi-speed coding


前言

几天前在保哥的plurk上,看到保哥推荐Zen-coding这个小工具,
光看Demo的影片就让人热血沸腾了。

有兴趣的人可以到官方网站下载一下你需要的Zen-coding。

官方网站:http://code.google.com/p/zen-coding/

支持的编辑器相当多,

    1. Full support
      • Aptana, crossplatform
      • Coda — via TEA for Coda, Mac
      • Espresso — via TEA for Espresso, Mac
      • editArea — online demo
      • Visual Studio — external download, Windows
    2. Partial support ("Expand Abbreviation" only)
      • TextMate, Mac. Also can be used with E-texteditor for Windows
      • TopStyle, Windows
      • Sublime Text, Windows
      • GEdit — external download, crossplatform
      • Dreamweaver CS4, Windows, Mac
      • UltraEdit, Windows
      • BBEdit/TextWrangler — external download, Mac
    3. Basic support (no abbreviation expanding, editor's snippets only)
      • Web IDE, crossplatform
      • NetBeans, crossplatform

这边小的是下载Visual Studio的plug-in,下载的msi安装档是1.61MB。

介绍

其实感觉使用上,就像code snippet一样,
输入片段,然后一个热键,自动产生相关的html或CSS片段。

比较不一样的,就是支持CSS selector的语法,(有没很熟…因为jQuery的Selector也是透过这样的方式去筛选数据的)

在网站上的Documentation上,可以看到:

  • HTML elements and its aliases for Zen HTML plugins
  • Selectors and aliases for Zen HTML plugins
  • CSS-properties and its aliases for Zen CSS plugins

里面有介绍输入什么样的字或语法,可以自动产生相对应的HTML阶层片段和CSS描述。


接下来,我们就来玩玩看。

Play it

先说明一下现在我的环境是VS2008,Widnows 7 x64版本,VS上有安装其他的plug-in为GhostDoc与Regionerate。
(会先介绍作业环境,是因为demo大的PC安装完Zen-coding,VS就挂掉了,原因不明。不过小的目前是正常运行的)

默认的安装路径是在:C:Program Files (x86)ZenCoding.VisualStudio
不过这不用理他,因为打开Visual Studio就看的到这个plug-in了。

工具->选项(选项的窗口里面,应该就有一个项目是ZenCoding)->环境->键盘
接着在‘显示包含下列的命令’打zen,就会看到两个东西,

keyboard

小的这边是只在‘HTML编辑器源代码检视’底下,使用Zen-Coding的功能,触发的热键是Ctrl+Q。

这样就设定完成了。

接着就如同网站上Documentation里描述的,我们只要打特定字,按下ctrl+Q,Zen-coding就会自动帮我们产生程序片段。

简单一点的说明,就是

  • >:代表下一层tag
  • #:代表id
  • .:代表class
  • *:代表在同一层要重复几次
  • $:代表重复次数的index
  • +:则是使用该tag最常见的template(如table+、ul+、select+等等...)


举个例子来说,
小的现在要建立一个table,有3个tr,每个tr里面有3个td,
table的id是91_table,table的class是.grid,td的id则是依index产生,td的id为91_td_N,td的Class为tdClass

那我只要输入:


table#91_table.grid>tr*3>td#91_td_$.tdClass*3

输入完后,按ctrl+Q,就会变成:



除了table之外,


结论

因为支持的是HTML和CSS,所以就比较不会局限使用何种语言开发,
ASP、ASP.NET Webform、ASP.NET MVC、JSP、PHP、甚至XHTML,
都可以透过Zen-coding这样的plug-in,使用CSS语法来快速产生具阶层式特性的html。

可以坐,就不要用站的啰…


或许您会对下列培训课程感兴趣:

  1. 2019/7/27(六)~2019/7/28(日):演化式设计:测试驱动开发与持续重构 第六梯次(中国台北)
  2. 2019/8/16(五)~2019/8/18(日):【C#进阶设计-从重构学会高易用性与高弹性API设计】第二梯次(中国台北)
  3. 2019/9/21(六)~2019/9/22(日):Clean Coder:DI 与 AOP 进阶实战 第二梯次(中国台北)
  4. 2019/10/19(六):【针对遗留代码加入单元测试的艺术】第七梯次(中国台北)
  5. 2019/10/20(日):【极速开发】第八梯次(中国台北)

想收到第一手公开培训课程资讯,或想询问企业内训、顾问、教练、咨询服务的,请洽 Facebook 粉丝专页:91敏捷开发之路。