最近在做一個(gè)項(xiàng)目，涉及到大量的HTML、CSS代碼的編寫，手動(dòng)寫代碼效率實(shí)在 是低下。于是想搜索一下，有沒有Notepad++插件可以支持自動(dòng)生成的，果不其然還真有。Emmet，這款神器其實(shí)就是 Zen Coding 的升級(jí)版，它可以極大的提高代碼編寫的效率，并提供了一種非常簡(jiǎn)練的語法規(guī)則，立刻生成對(duì)應(yīng)的 HTML 結(jié)構(gòu)或者 CSS 代碼，同時(shí)還有多種實(shí)用的功能幫助進(jìn)行前端開發(fā)。

Emmet支持多種編輯器，如Sublime Text 2，TextMate 1.x，Eclipse/Aptana，Espresso，Notepad++等。我習(xí)慣于在Notepad++下寫代碼，因此本文記述的是如何在Notepad++下安裝和使用。

1、下載Emmet和Python Script

Emmet需要 Python Script 的支持，因此這兩款插件必須同時(shí)安裝才能使用。

2、安裝

Emmet的安裝比較簡(jiǎn)單，下載完解壓后復(fù)制到Notepad++安裝目錄的plugins下即可。

Python Script的安裝則稍稍復(fù)雜，我走了一些彎路后才搞定。一開始以為將解壓后的文件扔到plugins下就行了，但啟動(dòng)Notepad++時(shí)總是報(bào)錯(cuò)。

于是我打開 Python Script 的幫助文件，看了一遍安裝手冊(cè)才搞明白。

下載完P(guān)ythonScript_full_0.9.2.0.zip后解壓，將python27.dll文件復(fù)制到Notepad++安裝目錄的根目錄下，同時(shí)在plugins文件夾中的全部?jī)?nèi)容復(fù)制到Notepad++安裝目錄的plugins下。

為表達(dá)清楚，摘錄Python Script 的目錄結(jié)構(gòu)如下：

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后，強(qiáng)烈建議更改 Expand Abbreviation 的鍵盤快捷鍵為Tab鍵。

打開Notepad++Settings > Shortcut Mapper…對(duì)話框，切換到 plugin commands，選中 Expand Abbreviation 項(xiàng)，

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

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

然后，就可以按照 Emmet 的工作流程來干活了：

打開 HTML 或 CSS 文件->按語法編寫指令->按下 TAB 鍵->生成！

4、Emmet的使用教程

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

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

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

用法：選中需要嵌套父級(jí)元素的標(biāo)簽，按快捷鍵，在彈出的對(duì)話框中輸入父級(jí)標(biāo)簽回車即可。例：

選中以上內(nèi)容，然后按【Ctrl+Shift+A】在彈出的對(duì)話框中輸入ul.nav>li.item-$*>a[title]后按【Enter】鍵，就會(huì)生成如下代碼

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

選中當(dāng)前光標(biāo)所在的標(biāo)記，再次按下可以依次選中其父標(biāo)簽。

Go to Next/Previous Edit Point( Ctrl+Alt+]? / Ctrl+Alt+[ ):轉(zhuǎn)到下一個(gè)/上一個(gè)編輯點(diǎn)

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

將選中的多行代碼合并為一行。壓縮css、js代碼為一行時(shí)，這個(gè)很方便。Ctrl+A，然后Ctrl+Alt+M，兩下即可搞定，免去了動(dòng)用壓縮工具的麻煩。(當(dāng)然這個(gè)只是簡(jiǎn)單地將代碼合并為一行，并不能做更深入的代碼壓縮)

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

注釋掉光標(biāo)所在的代碼塊 (Notepad++ 自帶的Ctrl+Shift+Q也可以用來注釋代碼)

Split/Join Tag(Ctrl+’ ):空標(biāo)簽轉(zhuǎn)化

比如將

Remove Tag(Ctrl+Shift+’ ):移除標(biāo)簽

比如將

hello world 移除div標(biāo)簽，留下hello world。

zen-coding常用縮寫

可以打開C:\Program Files\Notepad++\plugins\EmmetNPP\emmet\snippets.json這個(gè)json文件看一看，熟悉EmmetNPP自帶的一些縮寫規(guī)則。

總結(jié)

以上是生活随笔為你收集整理的notepadpython插件_Notepad++插件Emmet和Python Script的安装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。