码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-04-21 22:35:55      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:

     1、双桌面已经安装好的 “Notepad++” 程序,启动Notepad++程序。

 

       2、点开菜单“插件--->Plugin Manager--->Show Plugin Manager”。

技术分享

 

      3、进入“Plugin Manager”对话框,打开“Available”选项卡,勾选“Emmet”,点右下角的“Install”。

技术分享

 

      4、因为Emmet 需要 PythonScript 插件的支持。所以默认它会把这两个插件都安装。

技术分享

 

      5、安装完成后,提示需要重新启动 “Notepad++”,点“是”即可。

 

      6、我们打开一个写有 Emmet 代码的文档测试。点开点开菜单“插件--->Emmet--->Expand abbreviation”。

技术分享

 

      结果会会依次出现以下两个错误提示:说明“Python Script”安装不正确。所以Emmet 不能使用。

技术分享

 

      进入 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、把光标定在这节代码的后面,点开点开菜单“插件--->Emmet--->Expand abbreviation”。

技术分享

 

      瞬间就会生成如下图红框中的代码。这只是Emmet 功能的一个小小的示例。更多的功能见其官方网站:http://docs.emmet.io/

技术分享

 

      14、我们来设置一下 Emmet 功能的快捷键。菜单“设置--->管理快捷键”。

技术分享

 

      进入快捷键管理页面。打开  “Plugin commands” 选项卡,找到 “Expand abbreviation”,双击后面的  “Ctrl+Shift+Enter”,设置快捷键为 “Shift +Tab”,记得点“Ok”,让更改生效。以后使用 Emmet 功能,就不用菜单了,直接用 “Shift +Tab” 快捷键。

技术分享

 

本教程为原创精品教程,转载请注明出处:http://www.cnblogs.com/wind128/p/4445573.html

欢迎加入QQ群 279422298 进行更多交流

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

标签:

原文地址:http://www.cnblogs.com/wind128/p/4445573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!