2013-12-18 10:50 notepad++配置Zen Coding

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。 但，其代码自动补全很“鸡肋”，或者说Notepad++根本就没有代码补全功能。平时改点源代码很方便，但是想单独的写点源代码就比较麻烦了，难道要一点点的都敲吗？先上段视频：

怎么样？惊呆了吧。Zen Coding–一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 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 就是这样牛叉的东西。为Notepad++安装 Zen Coding 插件, 下载 Zen.Coding-Notepad++.v0.6.1.zip 解压将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。重启Notepad++，即可开始使用 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，立马就可以转化成：

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
           <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
    </ul>
</div>

【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）

比如将<div class="test"></div>转化为<div class="test"/>，反向亦可。

【Ctrl+Shift+’ 】移除标签（Remove Tag）

比如将 <div class="test">hello world</div> 移除div标签，留下hello world。

目前 Notepad++ 的 Zen Coding 只有这几个快捷键。下面给出一个HTML和CSS的缩写列表：

Zen Coding缩写下载

也可以自己编写缩写规则：pluginsNppScriptingincludesZen Coding.js为规则设定文件，

在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。即使你不编写自己的缩写规则，也强烈建议你阅读此文件，熟悉 Zen Coding 自带的一些缩写规则，让代码书写更加事半功倍~

最后，Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。