Zen Coding 让 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）

  比如写下?

  比如，我们想让写好的?

  【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 id="wrap">    <div class="content">        <p></p>    </div></div>

  以上介绍的仅仅是有关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