[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/
支持的编辑器相当多，
- Full support
- Aptana, crossplatform
- Coda — via TEA for Coda, Mac
- Espresso — via TEA for Espresso, Mac
- editArea — online demo
- Visual Studio — external download, Windows
- 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
- 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。可以坐，就不要用站的啰…
或许您会对下列培训课程感兴趣：- 2019/7/27(六)~2019/7/28(日)：演化式设计：测试驱动开发与持续重构 第六梯次（中国台北）
- 2019/8/16(五)~2019/8/18(日)：【C#进阶设计-从重构学会高易用性与高弹性API设计】第二梯次（中国台北）
- 2019/9/21(六)~2019/9/22(日)：Clean Coder：DI 与 AOP 进阶实战 第二梯次（中国台北）
- 2019/10/19(六)：【针对遗留代码加入单元测试的艺术】第七梯次（中国台北）
- 2019/10/20(日)：【极速开发】第八梯次（中国台北）
想收到第一手公开培训课程资讯，或想询问企业内训、顾问、教练、咨询服务的，请洽 Facebook 粉丝专页：91敏捷开发之路。原文:大专栏 [Tool]Zen-coding : Set of plugins for HTML and CSS hi-speed coding
原文地址：https://www.cnblogs.com/petewell/p/11509935.html
时间： 2024-10-18 10:53:02
