2012让代码书写健步如飞.docVIP

Zen Coding 让 Notepad++ 代码书写健步如飞 Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。 但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。 先看一段演示视频吧（建议反复观摩，其中演示了 Zen Coding 的各种典型用法） Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. （网速慢的，可以观看优酷版或者下载该视频。） 为Notepad++安装 Zen Coding 插件 下载 Zen.Coding-Notepad++.v0.6.1.zip 解压 将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。 重启Notepad++，即可开始使用 Zen Coding。 Zen Coding 用法 首先，我们先学习一下 Zen Coding 的缩写规则 （其实就是CSS选择器） E 元素名 (div, p); E#id 带id的元素 (div#content, p#intro, span#error); E.class 带class的元素 (div.header, p.error.critial). id 和 class 可以连写，如： div#content.column.width; EN 子元素 (divp, div#footerpspan); E+N 兄弟元素 (h1+p, div#header+div#content+div#footer); E*N 多项元素 (ul#navli*5a); E$*N 带序号的元素 (ul#navli.item-$*5); 接下来，我们来熟悉 Zen Coding for Notepad++ 的快捷键，也是 Zen Coding 的精髓 【Ctrl+E】 展开缩写（Expand Abbreviation） 比如写下 div#pagediv.logo+ulli*3a ，按一下 Ctrl+E，立马就可以转化成： div id=page div class=logo/div ul id=navigation lia href=/a/li lia href=/a/li lia href=/a/li /ul /div 【Ctrl+Shift+A】 嵌套代码（Wrap with Abbreviation） 比如，我们想让写好的 phello world/p ，想在外层再套一个div，只需按下【Ctrl+Shift+A】，在弹出的对话框中输入： div.wrap，回车。此标签就能自动被嵌套。 甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入ulli* ，回车。这三行内容就能自动被ul li 嵌套起来。（不仅限于 li 列表哦） 【Ctrl+Shift+D】选中代码块（Balance Tag Inward/Outward） 选中当前光标所在的代码块，长按可依次选中父块 【Ctrl+Alt+[ , Ctrl+Alt+]】 转到上一个/下一个编辑点（Go to Next/Previous Edit Point） 按下可以依次跳到可输入内容的编辑点，省去了不停按方向键或鼠标来定位编辑点的麻烦。 【Ctrl+Alt+M 】合并行（Merge Lines） 将选中的多行代码合并为一行。压缩css、js代码为一行时，这个很方便。Ctrl+A，然后Ctrl+Alt+M，两下即可搞定，免去了动用压缩工具的麻烦。（当然这个只是简单地将代码合并为一行，并不能做更深入的代码压缩） 【Alt+/ 】添加、移除注释（Toggle Comment） 注释掉光标所在的代码块 （Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码） 【Ctrl+’ 】空标签转化（Split/Join Tag） 比如将 div class=test/div 转化为 div class=test/， 反向亦可。 【Ctrl+Shift+’ 】移除标签（Remove Tag） 比如将 div class=testhell