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;
  • 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)

比如,我们想让写好的 <p>hello world</p> ,想在外层再套一个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 页面时,是如何输入文档声明和 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:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src

body 中会常用到的缩写

诸如 div, p, a, ul, ol, input:t, input:r 等等

其中,类似 ul+ 的形式可展开为(+号可自动生产默认的子元素)

<ul>
    <li></li>
</ul>

类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+

IE 条件注释:

cc:ie6, cc:ie, cc:noie

下边是一些典型用法示例:

div#name.one.two => 
		<div id="name" class="one two"></div>
[title="Hello world" rel]  =>
		<a href="" title="hello world" rel=""></a> 
td[colspan=2] =>
		<td colspan="2"></td>
li.item$*3  =>
		<li class="item1"></li><li class="item2"></li><li class="item3"></li> 
li.item$$$ =>
	<li class="item001"></li>
	
li.item-$-content*3 => 
	<li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li> 
#content>.section => 
	<div id="content"><div class="section"></div></div>

如果你写了这么一串出来,那么一个页面的基本结构就出来了:

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 

此外【|e】 可以输出转义字符

&lt;div id="wrap"&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

div#wrap>div.content>p|e|e 可转化为:

&amp;lt;div id=&quot;wrap&quot;&amp;gt;
    &amp;lt;div class=&quot;content&quot;&amp;gt;
        &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;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

  • 这东西稍微高级了点,我只能慢慢看

    @寻找自己,
    的确很高深。

  • 哇,总算更新了。
    这东西太适合了,正愁 NPP 木有代码提示叻。

    huke 回复:
    2012/11/30 1:44

    @NetPuter, 推荐你使用sublime text,可以安装zencoding插件,而且其自身的代码补全功能特别强大

  • 试试看有除了html还有别的语言没

    @小卒, 还有CSS

    @小卒, 才发现一个插件 Quicktext 巨强大,C,C++,java,php 之类的语言全支持 : http://www.soberma.com/notepad-quicktext

    @任平生, 哈哈,我试试,看起来很好~~谢谢

    huke 回复:
    2012/11/30 1:46

    @任平生, 推荐你使用sublime text,可以安装zencoding插件,而且其自身的代码补全功能特别强大,支持的语言也特别多

    huke 回复:
    2012/11/30 1:48

    @任平生,推荐你使用sublime text,可以安装zencoding插件,而且其自身的代码补全功能特别强大。还有超强的查找功能,也支持正则匹配查找。还支持多行编辑(在修正bug的时候用的较多)

  • 向東

    好东西

  • 神器呀

  • 希望能有 C/C++ 的版本

    @zinklink, 好吧,我无法想象如何做出 C/C++ 版本的

  • 记不住快捷键和命令,得多练练

  • 太高端了,看不太懂。

    @上海家具, 同学,你是 spam 吗

    @任平生, 不是,本人姓蒋

  • 如若然

    前一段时间就想用这个,可没有找到详细的使用方法。配合notepad挺不错的。

  • linjay

    纯顶而已了……

  • zen coding for notepad++按【Ctrl+Shift+A】 嵌套代码(Wrap with Abbreviation) 时,会在浏览器出现对话框,输入什么都出现错误,求解?

    @鬼, 我也遇到过这个问题,除了在任务管理器中结束所有ie进程,无其他解决办法 🙁
    ps. 不知道你用的ie是哪个版本,我用是Win7上的IE8,此问题只偶尔出现

    @任平生, 我在xp上IE和傲游2,傲游2是默认浏览器,按【Ctrl+Shift+A】出现的是傲游2里的对话框,我的win7上有ie8,傲游3等,按【Ctrl+Shift+A】有时出现ie8的对话框,有时会出现傲游3的对话框,而出现ie8对话框的时候不会出现,傲游3的就会出错,出现傲游3的对话框时,我把傲游3关了再按【Ctrl+Shift+A】就出现ie8的了,但在xp下关了傲游出现的还是傲游。郁闷了。

    @鬼, win7上的默认浏览器是Firefox

    @鬼, 好吧,我们只能鄙视 Zen Coding for npp 调用输入对话框的api竟然用浏览器的,不知道是Notepad++ 的api制约,还是Zen Coding的问题 😡

    我Win7上默认浏览器也不是IE8是Chrome,据此估计可能调用输入框的api都需用IE浏览器的 ❗

    @任平生, 纠结啊 😥

    huke 回复:
    2012/11/30 1:52

    @鬼, 更改ctrl+alt+A这个快捷方式,我是改为了ctrl+H(主要是sublime我也用的ctrl+H)

  • 糖糖

    百度很强大,搜索到了你。你很懂MSN,真好。
    目前有个很棘手的问题,所以我在这里冒昧留言了。也不知道你什么时候会看到,又会不会回复……
    我在用A的MSN号看B的MSN空间,因为B设置了只有特定的人才看的到。但是A并不知道我在用他的号看……(额,好复杂)
    我没有恶意,但是确实是好奇 – -!
    我很担心B能看到我来访的IP记录。会吗?如果会的话,我有什么办法避免呢。谢谢!

    @糖糖, 这个问题请请教你的幼儿园导师:什么是诚实

    Somebody 回复:
    2010/07/26 23:17

    @任平生, 我喜欢你的回答 🙄 我以为你会如实答复.
    其实以前就有看到过很多人有类似的提问,只是那时比较激进,要麽无视,要麽怒斥. 现在看来那些都是不成熟,没有智慧和修养的表现.
    这个世界就像是一张蜘蛛网,我们给予别人的一切都会经由被波及的对象不断扩大这个行为影响力,积极的也好,消极的也好,最终都会如实回到返还到那个起点 ➡

  • 永恒之塔

    很实用的工具
    感谢

  • 这个代码自动补齐也太厉害了点吧,不过要熟悉用法需要点时间。 🙄

    @LAONB, 写法跟CSS选择器基本一致,常写CSS的话,这个上手还是很快的 😛

  • 似乎aptana里也有这个插件。。。

    @zchiy2k, 恩。主流的几个编辑器都有相应插件的 😛

  • 哈哈!!插件不错~~

  • 来了留个小脚丫,呵呵

  • Rosalin L

    感谢分享,个人认为TextPad也不错。

  • Notepad++没有使用过,呵呵

  • 相当牛逼的东西。。。不过缩写我还没用过。。 🙄

  • 这个牛逼了。。。。。。

  • 我用的还是dw,菜鸟级别

  • 在用notepad++,不会写代码,杯具

  • 我倒是没有注意这些,我一直都用的notepad,不过我是不编辑代码的,只是偶尔网上找一些代码就拿来使用,哈哈

  • 学习了,管用

  • 呵呵……
    我是用notepad的……
    好像一直用的就是。
    其他的软件 用着不习惯……
    DW和FP 都不很好用
    !!!!
    像任兄 学习!

    huke 回复:
    2012/11/30 1:58

    @托比天空, 推荐你使用sublime text,可以安装zencoding插件,而且其自身的代码补全功能特别强大(它可以记住你在该文档中编辑过的东西,再次编辑时就会自动提示)它的补全方式不一定是缩写,比如bgc常表示background-color,你输入bkc它也会提示background-color,

  • 实战型文章啊

  • 看来编程的人比较合适,Notepad以前我用过一阵,

    @卢松松, 又见松松胸~

  • 对编程的人来说很实用,我下载用用看看

  • 比火箭都快 😮

  • 很好用,不过有没有中文版的

  • 借鉴 学习下

  • 一直用notepad~

  • DHC

    🙄 一起飞起来。

  • 这个东东太帅啦吧,我一直用notepad++,有鸟这个更无敌啦, 🙄

  • 好家伙 可以从PHPDESIGNER转回NOTEPAD++ 了

  • 很酷的东西 哈哈

  • 中秋节快到了,祝你中秋节快乐哈。

  • 还正的看不懂这些东西。

  • 不同文本文件间编辑删除重复项之类,不知道这个软件能不能搞定.

  • 貌似非常高级,但是要是只想实现那种普通的代码补全和自动完成有没有什么好的可以介绍?

    huke 回复:
    2012/11/30 1:59

    @fallinit, sublime text,强烈推荐这个

  • 真的很实用, 🙂 以前开发java用Eclipse

  • 我用 Wrap with Abbreviation 的时候为什么会提示错误啊?
    name=Error
    number=-2147418113
    ……
    然后一个大红叉……

  • 写Css和HTML很强大
    比的语言呢?

  • 感谢提供zen coding的小抄下载。我用的是DW+zen coding,确实高效。本想用notepad++ 但是插件虽然装上了,好像不起什么作用,譬如我写下:div.container>p*10,然后选用执行,但是没有反应,不解。

    @plate heat exchanger, zen coding 文件位置放对了吗?放好好后,需要重启 Notepad++,才能生效的。或者快捷键被你装的其他插件给占用了

    huke 回复:
    2012/11/30 2:00

    @plate heat exchanger, 快捷方式是ctrl+E

  • ctrl+shift+a太給力了,我一直再找个呢,多谢~~

  • hou

    不粗,转载了,3Q海洋了

  • seo

    🙄 好文章,我是个notepad++的粉饰,用这个帮了我不少忙

  • doxdala

    郁闷了,还是嵌套的时候 ctrl+shift+a 以后就会弹出IE对话框,无效啊~~~

  • 现在我还用DW,有这么好的软件,我下个试试再来反馈.