Zen Coding 讓Notepad++ 代碼書寫大步流星

    最近看了很多關於如何提升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】能夠輸出轉義字符
&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 自帶的一些
縮寫規則，讓代碼書寫更加事半功倍~

本文部份內容來自網上。