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 均可以在官方下載頁面找到相關的插件。