如何在Notepad++ 中成功地安裝Emmet 插件


      對於前端來說,Emmet 是一個好東西,但是好幾次在 “Notepad++” 中安裝后不能使用。今天認認真真地查找了失敗原因,配置完成后,終於可以在 “Notepad++” 下正常使用了。故把過程記錄了下來。

 

     1、雙桌面已經安裝好的 “Notepad++” 程序,啟動 Notepad++ 程序。

 

       2、點開菜單 “插件--->Plugin Manager--->Show Plugin Manager”。

 

      3、進入 “Plugin Manager” 對話框,打開 “Available” 選項卡,勾選 “Emmet”,點右下角的 “Install”。

 

      4、因為Emmet 需要 PythonScript 插件的支持。所以默認它會把這兩個插件都安裝。

 

      5、安裝完成后,提示需要重新啟動 “Notepad++”,點“是”即可。

 

      6、我們打開一個寫有 Emmet 代碼的文檔進行測試。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
        <title>Emmet</title>
    </head>
    <body>
        ul#nav>li.item$*4>a{Item $}
        ul#nav>li.item$*8>a{Item $}
        <ul id="nav">
            <li class="item1"><a href="">Item 1</a></li>
            <li class="item2"><a href="">Item 2</a></li>
            <li class="item3"><a href="">Item 3</a></li>
        </ul>
        <ul id="nav"><li class="item1"><a href="">Item 1</a></li><li class="item2"><a href="">Item 2</a></li><li class="item3"><a href="">Item 3</a></li><li class="item4"><a href="">Item 4</a></li>
        </ul>
    </body>
</html>

 

      把光標定在代碼 ul#nav>li.item$*8>a{Item $} 之后,點開菜單 “插件--->Emmet--->Expand abbreviation”。

 

      結果依次出現以下兩個錯誤提示:說明 “Python Script” 安裝不正確,從而導致 Emmet 不能正常使用。

 

      進入 Python Script 插件所在目錄,你會發現它里面是空的,沒有文件。進一步驗證了 Python Script 插件出了問題。

 

      7、點開菜單“插件--->Plugin Manager--->Show Plugin Manager”,點 “Installed” 選項卡。勾選 “Python Script”,點 “Remove”,在彈出的警告框中選擇“是”,移除 “Python Script” 插件。

 

      8、下面我們來解決 “Python Script” 插件的問題,進入網址:http://sourceforge.net/projects/npppythonscript/files/Python%20Script%201.0.6.0/,下載 “PythonScript_Full_1.0.6.0.zip”。

 

      下載完成后解壓,文件如下:

 

      9、把 PythonScript_Full_1.0.6.0\plugins\docs 文件夾里的 “PythonScript” 的復制到 “Notepad++”  插件安裝目錄 C:\Program Files (x86)\Notepad++\plugins\doc,如果原文件夾有同名文件夾請覆蓋。這是一個幫助文件。

 

      10、把 PythonScript_Full_1.0.6.0\plugins 文件夾里的 “PythonScript” 文件夾和 “PythonScript.dll” 文件復制到 “Notepad++”  插件安裝目錄 C:\Program Files (x86)\Notepad++\plugins,如果原文件夾有同名文件夾或文件請覆蓋。

 

      11、把 PythonScript_Full_1.0.6.0 文件夾里的 “python27.dll” 文件復制到 “Notepad++”  安裝目錄 C:\Program Files (x86)\Notepad++,如果原文件夾有同名文件請覆蓋。

 

      12、已經手動安裝完成 “PythonScript” 插件,下面我們開始測試。打開 “Notepad++” 程序,新建一個html文件,代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
        <title>Emmet</title>
    </head>
    <body>
        ul#nav>li.item$*4>a{Item $}
        ul#nav>li.item$*8>a{Item $}
        <ul id="nav">
            <li class="item1"><a href="">Item 1</a></li>
            <li class="item2"><a href="">Item 2</a></li>
            <li class="item3"><a href="">Item 3</a></li>
        </ul>
        <ul id="nav"><li class="item1"><a href="">Item 1</a></li><li class="item2"><a href="">Item 2</a></li><li class="item3"><a href="">Item 3</a></li><li class="item4"><a href="">Item 4</a></li>
        </ul>
    </body>
</html>

 

 

      13、把光標定在代碼 ul#nav>li.item$*8>a{Item $} 之后,點開點開菜單“插件--->Emmet--->Expand abbreviation”。

 

      瞬間就會生成如下圖紅框中的代碼。這只是Emmet 功能的一個小小的示例。更多的功能見其官方網站:http://docs.emmet.io/

 

      14、我們來設置一下 Emmet 功能的快捷鍵。菜單“設置--->管理快捷鍵”。

 

      進入快捷鍵管理頁面。打開  “Plugin commands” 選項卡,找到 “Expand abbreviation”,雙擊后面的  “Ctrl+Shift+Enter”,設置快捷鍵為 “Alt +E”,記得點“Ok”,讓更改生效。以后使用 Emmet 功能,就不用菜單了,直接用 “Alt +E” 快捷鍵。

 

總結:

      1、從 “Notepad++” 的插件管理器安裝 “Emmet” 和 “Python Script” 容易出錯,導致不能正常使用。強烈建議手動下載安裝  “Python Script” 插件。

 

      2、建議手動下載 Emmet 插件包,下載地址:http://download.emmet.io/npp/emmet-npp.zip

 

      3、建議手動下載 Python Script 插件包,下載地址:http://sourceforge.net/projects/npppythonscript/files/Python%20Script%201.0.6.0/

 

      4、兩個包解壓后分別放入 “Notepad++” 的插件文件夾,注意每個文件的路徑,如教程所講。

 

歡迎加入QQ群 279422298 進行更多交流

本教程為原創精品教程,轉載請注明出處:http://www.cnblogs.com/wind128/p/4445573.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM