Zen Coding 让 Notepad++ 代码书写健步如飞

来源：百度文库 编辑：神马文学网 时间：2024/05/01 21:21:47
Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。
但，不知道有多少同学跟我一样，在coding 时被 Notepad++粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。
 
先看一段演示视频吧（建议反复观摩，其中演示了 Zen Coding 的各种典型用法）
Zen Coding v0.5 fromSergey Chikuyonok onVimeo. （网速慢的，可以观看优酷版或者下载该视频。）
为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;
E>N
子元素 (div>p, div#footer>p>span);
E+N
兄弟元素 (h1+p, div#header+div#content+div#footer);
E*N
多项元素 (ul#nav>li*5>a);
E$*N
带序号的元素 (ul#nav>li.item-$*5);
接下来，我们来熟悉 Zen Coding for Notepad++ 的快捷键，也是 Zen Coding 的精髓
【Ctrl+E】 展开缩写（Expand Abbreviation）
比如写下 div#page>div.logo+ul>li*3>a ，按一下 Ctrl+E，立马就可以转化成：
【Ctrl+Shift+A】 嵌套代码（Wrap with Abbreviation）

比如，我们想让写好的

hello world

，想在外层再套一个div，只需按下【Ctrl+Shift+A】，在弹出的对话框中输入： div.wrap，回车。此标签就能自动被嵌套。
甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入 ul>li* ，回车。这三行内容就能自动被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）
比如将
转化为
， 反向亦可。
【Ctrl+Shift+’ 】移除标签（Remove Tag）
比如将
hello world
移除div标签，留下hello world。
好了，目前 Notepad++ 的 Zen Coding 只有这几个快捷键，下面介绍一些常用到的缩写
不知道大家新建一个html 页面时，是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding，只需输入几个字母就能立马生成相应文档声明的 html 结构框架
html:4t (HTML 4.01 Transitional)html:4s (HTML 4.01)html:xt (XHTML 1.0)html:xs (XHTML 1.0 Strict)html:xxs (XHTML 1.1)html:5 (HTML5)
head 中常用到的一些缩写
meta:utf, meta:compatstyle, link:css, link:print, link:favicon, link:rss,script, script:src
body 中会常用到的缩写
诸如 div, p, a, ul, ol, input:t, input:r 等等
其中，类似 ul+ 的形式可展开为（+号可自动生产默认的子元素）

类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+ 等
IE 条件注释：
cc:ie6, cc:ie, cc:noie
下边是一些典型用法示例：
div#name.one.two =>
[title="Hello world" rel] => td[colspan=2] =>li.item$*3 =>
  • li.item$$$ =>
  • li.item-$-content*3 =>
  • #content>.section =>

    如果你写了这么一串出来，那么一个页面的基本结构就出来了：
    div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
    此外【|e】 可以输出转义字符
    <div id="wrap"><div class="content"><p></p></div></div>
    div#wrap>div.content>p|e|e 可转化为：
    &lt;div id="wrap"&gt;&lt;div class="content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
    以上介绍的仅仅是有关HTML的缩写，CSS的缩写就更多了，建议查看Zen Coding 小抄，学习CSS 的 Zen Coding 方式
    自己编写缩写规则
    plugins\NppScripting\includes\Zen Coding.js
    在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。
    即使你不编写自己的缩写规则，也强烈建议你阅读此文件，熟悉 Zen Coding 自带的一些缩写规则，让代码书写更加事半功倍~
    最后，Zen Coding 不仅有Notepad++版，Aptana、UltraEdit、Dreamweaver也有相应版本，速速前往官方下载页 查找是否有你常用的编辑器的Zen Coding插件吧～
    文中部分示例及图片来自Zen Coding Wiki
    Zen Coding 让 Notepad++ 代码书写健步如飞 30秒让你的电脑健步如飞 ３０秒让你电脑健步如飞 ApeML代码书写规范 架构师任务--制定代码规范(standard of Coding Standards) -... 网站代码:Head部分title书写规范 网站代码:Head部分keywords书写规范 让你win7健步如飞的十种方法！ - Windows7下载/交流专区 - J... XML Notepad 2006 设计 RegExp IN NOTEPAD ++ 教你30秒清除电脑中的垃圾，让你的电脑健步如飞 - 常用软件及硬件交流区 - 理想论坛 -... Presentation Zen Graphword Zen v.s. Presentation Zen 请不要这样书写历史---让中国人难堪的数字 Zen Centrum PRAJNA The Zen of Cat 简述如何书写工程化的简单代码--IT学生解惑真经 简述如何书写工程化的简单代码--IT学生解惑真经 新手进阶 Notepad 编辑小技巧四则 70 Expert Ideas For Better CSS Coding ISO14496-10(Video)?-?Advanced?Video?Coding简介 ‘Zen‘ by Master Hui Lv Zen Cart优化由内至外 专辑推荐《Zen World 禅界》