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

标签：nload   就是   敏捷   ati   cin   enc   encoding   template   selector   

[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，就会看到两个东西，

小的这边是只在‘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之外，跟

+
• 也相当适合。

  输入ul+，按ctrl+Q，就会出现

  
  

  输入select+，按ctrl+Q就会出现

结论

因为支持的是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敏捷开发之路。

原文:大专栏  [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

标签：nload   就是   敏捷   ati   cin   enc   encoding   template   selector   

原文地址：https://www.cnblogs.com/petewell/p/11509935.html