Zen Coding – 超快地写网页代码
原文出自:http://www.appinn.com/Zen-Coding/
上次在北京看到善用佳软的 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 试试吧。
网页版快捷键说明:
- Ctrl + E:展开代码
- Ctrl + D:向外快速选中代码块
- Shift + Ctrl + D:向内快速选中代码块
- Shift + Ctrl + A:输入一个缩写,自动展开并包围所选代码
- Ctrl + Alt+→ :光标智能跳转到下一个编辑点(自己试试就知道多体贴了)
- Ctrl + Alt+←:光标智能跳转到上一个编辑点
- Ctrl + L:选择一行
官方演示视频:Zen CSS 和 Zen HTML。另外,缩写的含义请看:Zen CSS Properties 和 Zen HTML Elements,各种插件的安装方法请看官方 wiki。
最后提醒一点:在这个墙外的官方演示视频(高清)中,墙内观看地址,还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。
下载:官方网站
P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码
update: 多谢 SULei 的提醒:EditPlus 也有了,zen code for EditPlus
分享到:
相关推荐
notepad++ 密码是1 zencoding插件
Zen Coding: 一种快速编写HTML/CSS代码的方法 输入 div#i$-test.class$$$*5 …然后调用”展开缩写”行为 会被转换成为: <div id="i1-test" class="class111"></div> <div id="i2-test" class="class222"></div> ...
一种快速编写HTML/CSS代码的方法 使用仿CSS选择器的语法来快速开发HTML和CSS html+css 代码快速编写 ——由Sergey Chikuyonok开发。 Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上...
sublime text 2 zen coding插件 zen coding for sublime text 2
vim的zenCoding插件,能显著提高前端开发效率。
这是zencoding的使用手册,如果你感兴趣的话可以下来看看 英文的哦 亲~
一种快速编写HTML/CSS代码的方法 使用仿CSS选择器的语法来快速开发HTML和CSS html+css 代码快速编写 ——由Sergey Chikuyonok开发。 Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)...
Zencoding是网络开发人员的得力助手,这里奉上Zencoding的菜单与快捷键一览表,还有解决快捷键冲突的办法。
Sublime Text 2插件包zen coding--免费下载zen coding Sublime Text 2插件包
zen coding DW插件可以更方便快捷的编写你的网站代码了。
dreamweaver cs6 zen coding插件,快速书写html
zencoding相比做前端的同学都知道,可是神器,这个参考手册是pdf版,包括所有使用方法,做的也很漂亮,喜欢的同学可以拿去。
Zen Coding v.0.6.mxp cs5 dw代码神器
Netbeans 使用 Zen Coding 提高HTML+CSS编写效率
Zen Coding 一种快速编写HTML/CSS代码的方法,这个是editplus的插件,方便喜欢在editplus下编写html的朋友。 [安装] 在EditPlus中依次点击[工具(T)]->[配置用户工具(C)]->[添加(D)]->[应用程序] 然后设置如下: ...
zenCoding从其它地主转载而来。集成的ZenCoding压缩包
zencoding notepad++ toturial
zen coding插件方便简洁,输入代码关键字即可实现完整排版。极为方便
提高HTML编写的效率,让HTML的编写更快捷,editplus html代码书写必备工具