Notepad++外掛程式Emmet和Python Script的安裝

標籤：

　最近在做一個項目，涉及到大量的HTML、CSS代碼的編寫，手動寫代碼效率實在 是低下。於是想搜尋一下，有沒有Notepad++外掛程式可以支援自動產生的，果不其然還真有。Emmet，這款神器其實就是 Zen Coding 的升級版，它可以極大的提高代碼編寫的效率，並提供了一種非常簡練的文法規則，立刻產生對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能協助進行前端開發。
　　Emmet支援多種編輯器，如Sublime Text 2，TextMate 1.x，Eclipse/Aptana，Espresso，Notepad++等。我習慣於在Notepad++下寫代碼，因此本文記述的是如何在Notepad++下安裝和使用。

 

1、下載Emmet和Python Script
Emmet需要 Python Script 的支援，因此這兩款外掛程式必須同時安裝才能使用。
詳見：https://github.com/emmetio/npp

：
PythonScript_full_0.9.2.0

Emmet的Notepad++外掛程式

2、安裝
Emmet的安裝比較簡單，下載完解壓後複製到Notepad++安裝目錄的plugins下即可。
Python Script的安裝則稍稍複雜，我走了一些彎路後才搞定。一開始以為將解壓後的檔案扔到plugins下就行了，但啟動Notepad++時總是報錯。
於是我開啟 Python Script 的協助檔案，看了一遍安裝手冊才搞明白。
下載完PythonScript_full_0.9.2.0.zip後解壓，將python27.dll檔案複製到Notepad++安裝目錄的根目錄下，同時在plugins檔案夾中的全部內容複寫到Notepad++安裝目錄的plugins下。
為表達清楚，摘錄Python Script 的目錄結構如下：

Notepad++ (Notepad++ 安裝主目錄,一般位於"C:\Program Files"下) + |-- python27.dll(放在Notepad++ 安裝主目錄下，和notepad++.exe屬於同一目錄) +-- plugins                      |-- PythonScript.dll           |           |-- PythonScript           |              |   |-- lib           |   |               |   |     |-- (*.py)   很多 *.py 檔案和子目錄           |   |           |   |-- scripts           |                        |             |-- (指令碼和一些樣本)           |           |           |-- doc           |               |     |-- PythonScript           |                        |             |-- PythonScript.chm(PythonScript協助文檔，英文版)

 

3、Emmet的工作流程
安裝完Emmet後，強烈建議更改 Expand Abbreviation 的鍵盤快速鍵為Tab鍵。
開啟Notepad++Settings > Shortcut Mapper…對話方塊，切換到 plugin commands，選中 Expand Abbreviation 項，

(Expand Abbreviation(Ctrl+E):展開縮寫  用法：輸入縮寫代碼後，在代碼末尾直接按快速鍵得到完整代碼。)

修改其快速鍵為Tab鍵即可。

然後，就可以按照 Emmet 的工作流程來幹活了：
開啟 HTML 或 CSS 檔案->按文法編寫指令->按下 TAB 鍵->產生！

 

 

4、Emmet的使用教程

 

 

Expand Abbreviation(Ctrl+E):展開縮寫

 

用法：輸入縮寫代碼後，在代碼末尾直接按快速鍵得到完整代碼。

 

Wrap with Abbreviation(Ctrl+Shift+A):嵌套父級元素

 

用法：選中需要嵌套父級元素的標籤，按快速鍵，在彈出的對話方塊中輸入父級標籤斷行符號即可。例：

 

12345

list1 list2 list3 list4 list5

 

選中以上內容，然後按【Ctrl+Shift+A】在彈出的對話方塊中輸入ul.nav>li.item-$*>a[title]後按【Enter】鍵，就會產生如下代碼

 

1234567

<ul class="nav">     <li class="item-1"><a href="" title="">list1</a></li>     <li class="item-2"><a href="" title="">list2</a></li>     <li class="item-3"><a href="" title="">list3</a></li>     <li class="item-4"><a href="" title="">list4</a></li>     <li class="item-5"><a href="" title="">list5</a></li> </ul>

 

Balance TagInward/Outward(Ctrl+Shift+D):選中代碼塊

 

選中當前游標所在的標記，再次按下可以依次選中其父標籤。

 

Go to Next/Previous Edit Point( Ctrl+Alt+]  / Ctrl+Alt+[ ):轉到下一個/上一個編輯點

 

Merge Lines(Ctrl+Alt+M):合并行

 

將選中的多行代碼合并為一行。壓縮css、js代碼為一行時，這個很方便。Ctrl+A，然後Ctrl+Alt+M，兩下即可搞定，免去了動用壓縮公用程式的麻煩。（當然這個只是簡單地將代碼合并為一行，並不能做更深入的代碼壓縮）

 

Toggle Comment(Alt+/):添加、移除注釋

 

注釋掉游標所在的代碼塊 （Notepad++ 內建的Ctrl+Shift+Q也可以用來注釋代碼）

 

Split/Join Tag(Ctrl+’ ):空標籤轉化

 

比如將 <div></div> 轉化為 <div/>， 反向亦可。

 

Remove Tag(Ctrl+Shift+’ ):移除標籤

 

比如將 <div>hello world</div> 移除div標籤，留下hello world。

 

zen-coding常用縮寫

 

12345678910111213141516

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)   meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src   div, p, a, ul, ol, input:t, input:r   ol+, dl+, table+, tr+, select+, map+, optg+   cc:ie6, cc:ie, cc:noie

 

可以開啟C:\Program Files\Notepad++\plugins\EmmetNPP\emmet\snippets.json這個json檔案看一看，熟悉EmmetNPP內建的一些縮寫規則。

 

參考連結

Notepad++外掛程式Emmet和Python Script的安裝