对于前端来说,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 插件的更多相关文章

  1. Notepad++下载需要的插件(如何在Notepad++中手动下载需要的插件)

    需求说明: 下载在实际工作中需要的Notepad++插件,或者是因为Notepadd++设置的原因导致不能直接在软件中显示插件. 即手动登录到指定的链接中进行插件的下载. 操作过程: 1.以xmlto ...

  2. Atom编辑器中安装Emmet插件失败的问题

    今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...

  3. Sublime Text3开发工具安装emmet插件

    第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...

  4. Eclipse离线安装Emmet插件

    Eclipse离线安装Emmet插件 近期发现了一个写前端代码很好的一个东西,一个叫做Emmet的工具,这个工具使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,前身就是大 ...

  5. 解决 TextMate 2 无法安装 Emmet 插件

    本篇文章由:http://xinpure.com/solving-textmate-2-cannot-install-emmet-plugin/ 前端神器 Emmet 插件原名为 ZedCoding ...

  6. thinkphp中composer方式安装的插件如何使用

    thinkphp中composer方式安装的插件如何使用 一.总结 一句话总结:任何东西都是可以百度或者google搜到的,要自己先想怎么解决,解决不出来迅速百度,不要自己臆断 1.在tp5框架的什么 ...

  7. Zend Studio 中安装emmet插件的方法

    本人的Zend Studio版本是Zend Studio 10.0.0. 1. 打开Zend Studio,点击 Help --> Install New Software,如下图: 2.  在 ...

  8. 如何在webpack中成功引用到图片?

    打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...

  9. 如何在Notepad ++中每两行合并

    \n 新行 \r 行首 [^\n]+ 是排除\n外的任意字符 [^\r]+ 是排除\r外的任意字符 用[^\n]或[^\r]都不行..老是匹配到空的东西..原来是这么一回事..用[^\n\r]+就行了 ...

随机推荐

  1. 《理解 ES6》阅读整理:函数(Functions)(四)Arrow Functions

    箭头函数(Arrow Functions) 就像名字所说那样,箭头函数使用箭头(=>)来定义函数.与传统函数相比,箭头函数在多个地方表现不一样. 箭头函数语法(Arrow Function Sy ...

  2. 蛙蛙推荐:AngularJS学习笔记

    为了降低前端代码的数量,提高可维护性,可测试性,学习了下AngularJS,正在准备投入项目开发中. AngularJS的概念比较多,如果面向对象方面的书理解的不透的话学习起来有些费劲,它的官方有个快 ...

  3. 如何做到在虚拟数据库和真实数据库之间自由切换?【低调赠送:QQ高仿版GG 4.4 最新源码】

    记得以前在公司上班时,有时候白天的活没干完,我就会把工作带回家晚上加班继续做.但是,我们开发用的数据库是部署在公司局网内部的一台服务器上的,在家里是肯定连不上这台机器的.在家里没有数据库,服务端就跑不 ...

  4. 人人都是 DBA(XIII)索引信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  5. Java多线程系列--“JUC锁”11之 Semaphore信号量的原理和示例

    概要 本章,我们对JUC包中的信号量Semaphore进行学习.内容包括:Semaphore简介Semaphore数据结构Semaphore源码分析(基于JDK1.7.0_40)Semaphore示例 ...

  6. Linux cat命令

    200 ? "200px" : this.width)!important;} --> 介绍 cat命令经常会用来查看一个文件的内容,并且结合它本身的一些参数经常可以用来做一 ...

  7. python sorted排序

    python sorted排序 Python不仅提供了list.sort()方法来实现列表的排序,而且提供了内建sorted()函数来实现对复杂列表的排序以及按照字典的key和value进行排序. s ...

  8. Ping!

    我知道我很久没有更新这个博客了,所以特意来更新一下,骚扰一下各位订户.我有几年没有写过很具体跟技术相关的文章了,而跟职业发展相关的文章也半年没更新了,所以最近准备开始写写技术文章.在此之前,我要先完结 ...

  9. CSS样式重置

    ;;;;;;;;;; } input, select {     vertical-align:middle; }

  10. 虚拟化平台cloudstack(3)——安装(下)

    登录时用户名和密码错误 默认账号密码 admin/password 管理节点安装好后,初始化数据库,完了使用admin和password登陆提示用户名密码错误,查看日志: Fail to genera ...