如何在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

如何在Notepad++ 中成功地安装Emmet 插件的更多相关文章

Notepad++下载需要的插件(如何在Notepad++中手动下载需要的插件)
需求说明: 下载在实际工作中需要的Notepad++插件,或者是因为Notepadd++设置的原因导致不能直接在软件中显示插件. 即手动登录到指定的链接中进行插件的下载. 操作过程: 1.以xmlto ...
Atom编辑器中安装Emmet插件失败的问题
今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...
Sublime Text3开发工具安装emmet插件
第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...
Eclipse离线安装Emmet插件
Eclipse离线安装Emmet插件近期发现了一个写前端代码很好的一个东西,一个叫做Emmet的工具,这个工具使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,前身就是大 ...
解决 TextMate 2 无法安装 Emmet 插件
本篇文章由:http://xinpure.com/solving-textmate-2-cannot-install-emmet-plugin/ 前端神器 Emmet 插件原名为 ZedCoding ...
thinkphp中composer方式安装的插件如何使用
thinkphp中composer方式安装的插件如何使用一.总结一句话总结:任何东西都是可以百度或者google搜到的,要自己先想怎么解决,解决不出来迅速百度,不要自己臆断 1.在tp5框架的什么 ...
Zend Studio 中安装emmet插件的方法
本人的Zend Studio版本是Zend Studio 10.0.0. 1. 打开Zend Studio,点击 Help --> Install New Software,如下图: 2. 在 ...
如何在webpack中成功引用到图片？
打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...
如何在Notepad ++中每两行合并
\n 新行 \r 行首 [^\n]+ 是排除\n外的任意字符 [^\r]+ 是排除\r外的任意字符用[^\n]或[^\r]都不行..老是匹配到空的东西..原来是这么一回事..用[^\n\r]+就行了 ...

随机推荐

js基础知识：表达式
一.什么是表达式?我理解的"表达式":程序执行到1个"表达式"时,会返回1个值到这个"表达式"所在的位置. var a = 10 , b = ...
Autolayout（VFL）
Autolayout(VFL) 1.NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format opt ...
xxxx年度员工岗位技能调查表
昨天应公司要求设计了一张 <员工岗位技能调查表>,写微博有2个目的:第一是供大家参考,第二是记录下从事质量管理工作走过的点点滴滴.这是我第一次写工作方面的博客,之后会坚持写下去的. --- ...
【C-分支结构】
一.关系运算符双目运算符自左向右结合关系运算符的优先级低于算术运算符,高于赋值运算符 <(小于) <=(小于或等于) >(大于) >=(大于或等于) ==(等于) !=( ...
Main()
P25 “每一个c#可执行文件都必须有一个入口——Main()方法” 我一直对这个Main()方法有一些疑问. 那就是这里头的参数. 在JAVA里,main(String args[])中的参数是绝对 ...
JavaScript 笔记
function (函数)document(文档 get获得文档中..) <script type="text/javascript"> function yz(){ ...
java日志框架slf4j与log4j
日志记录自然是非常重要的,但恐怕能记住slf4j与log4j等日志框架配置的人就很少了,这个东西不难,只是配置好后很少会去动它,开发新项目一般也是从其他项目拷贝,或者参照文档废话不多说,先说log4 ...
一个空行引起的阿里云负载均衡上部署https证书的问题
今天在阿里云上购买了WoSign的https证书,在证书签发后,在控制台下载证书文件,一共有2个文件,一个是.key文件(私钥文件),一个是.pem文件(证书文件). 然后在阿里云负载均衡“证书管理” ...
Java虚拟机12：Java内存模型
什么是Java内存模型 Java虚拟机规范中试图定义一种Java内存模型(Java Memory Model,JMM)来屏蔽掉各种硬件和操作系统的访问差异,以实现让Java程序在各种平台下都能达到一致 ...
前端自动化测试工具doh学习总结（二）
一.robot简介 robot是dojo框架中用来进行前端自动化测试的工具,doh主要目的在于单元测试,而robot可以用来模仿用户操作来测试UI.总所周知,Selenium也是一款比较流行的前端自动 ...

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

如何在Notepad++ 中成功地安装Emmet 插件的更多相关文章

随机推荐

热门专题