热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

对于前端来说,Emmet是一个好东西,但是好几次在“Notepad++”中安装后不能使用。今天认认真真地查找了失败原因,配置完成后,终于可以在“Notepad++”下正常使用了。

      对于前端来说,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>Emmettitle>
    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 1a>li>
            <li class="item2"><a href="">Item 2a>li>
            <li class="item3"><a href="">Item 3a>li>
        ul>
        <ul id="nav"><li class="item1"><a href="">Item 1a>li><li class="item2"><a href="">Item 2a>li><li class="item3"><a href="">Item 3a>li><li class="item4"><a href="">Item 4a>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>Emmettitle>
    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 1a>li>
            <li class="item2"><a href="">Item 2a>li>
            <li class="item3"><a href="">Item 3a>li>
        ul>
        <ul id="nav"><li class="item1"><a href="">Item 1a>li><li class="item2"><a href="">Item 2a>li><li class="item3"><a href="">Item 3a>li><li class="item4"><a href="">Item 4a>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


推荐阅读
  • GIMP 2.99.2 发布:UI 采用 GTK3 实现、原生支持高分屏和 Wayland
    开源项目评选最后一周,手里的5票再不用就没用了https:www.oschina.netprojecttop_cn_2020GIMP2.99.2已发布,同时这也标志着GIMP3.0的到来,其中最显著的变化是从GTK2过渡到GTK3工具包。基于 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 本文介绍如何在 Visual Studio Code 中使用 Jupyter Notebook 插件,包括创建、编辑和运行笔记本的基本操作。 ... [详细]
  • 三星W799在2011年的表现堪称经典,以其独特的双屏设计和强大的功能引领了双模手机的潮流。本文详细介绍其配置、功能及锁屏设置。 ... [详细]
  • 在哈佛大学商学院举行的Cyberposium大会上,专家们深入探讨了开源软件的崛起及其对企业市场的影响。会议指出,开源软件不仅为企业提供了新的增长机会,还促进了软件质量的提升和创新。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 深入理解Shell脚本编程
    本文详细介绍了Shell脚本编程的基础概念、语法结构及其在操作系统中的应用。通过具体的示例代码,帮助读者掌握如何编写和执行Shell脚本。 ... [详细]
  • 如何使用PyCharm及常用配置详解
    对于一枚pycharm工具的使用新手,正确了解这门工具的配置及其使用,在使用过程中遇到的很多问题也可以迎刃而解,文中有非常详细的介绍, ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • java文本编辑器,java文本编辑器设计思路
    java文本编辑器,java文本编辑器设计思路 ... [详细]
  • MySQL Debug 模式的实现与应用
    本文详细介绍了如何启用和使用 MySQL 的调试模式,包括编译选项、环境变量配置以及调试信息的解析。通过实际案例展示了如何利用调试模式解决客户端无法连接服务器的问题。 ... [详细]
  • 本文将带您了解Cocos家族的不同版本和分支,特别是Cocos Creator的发展历程及其核心特性,帮助初学者快速入门。 ... [详细]
  • 如何从python读取sql[mysql基础教程]
    从python读取sql的方法:1、利用python内置的open函数读入sql文件;2、利用第三方库pymysql中的connect函数连接mysql服务器;3、利用第三方库pa ... [详细]
author-avatar
呜呀003_581
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有