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

最新推荐文章于 2024-08-10 13:48:53 发布

chuangyuansa9569

最新推荐文章于 2024-08-10 13:48:53 发布

阅读量146

点赞数

原文链接：https://my.oschina.net/u/1162572/blog/136841

版权

最近看了不少关于如何提高css代码编写率，有人说WebStorm编写代码速度快，正确率高。诚然，WebStorm的确有上述优点，但笔者平时更喜欢用notepad++来书写代码，下面就介绍一种让notep++快速、正确书写代码的插件工具--Zen Coding。（下载地址：http://zen-coding.googlecode.com/files/Zen.Coding-Notepad++.v0.6.1.zip）

首先说一下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             EditPoint）
        按下可以依次跳到可输入内容的编辑点，省去了不停按方向键或鼠标来定位编辑点的麻烦。

        【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 结构框架
        meta:utf, meta:compatstyle, link:css, link:print, link:favicon, link:rss,script,script:srcbody 中会常用到的缩写诸如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#fo
oter 此外【|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 自带的一些
缩写规则，让代码书写更加事半功倍~