zoukankan      html  css  js  c++  java
  • 如何在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.0pluginsdocs 文件夹里的 “PythonScript” 的复制到 “Notepad++”  插件安装目录 C:Program Files (x86)Notepad++pluginsdoc,如果原文件夹有同名文件夹请覆盖。这是一个帮助文件。

     

          10、把 PythonScript_Full_1.0.6.0plugins 文件夹里的 “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

  • 相关阅读:
    asp.net 获得域名,端口,虚拟目录[转]
    在EntityFramework6中执行SQL语句【转】
    Ingress 访问日志分析与监控
    kubernetes之secret
    ingress Whitelisting白名单机制
    Kubernates之从pod中拷贝文件到宿主机
    kubernetes-subpath用法(把文件挂载在已存在的目录下,不覆盖原目录)
    npm 私服工具verdaccio 搭建
    nvm安装、解决nvm command not found问题、卸载
    k8s Pod 扩容和缩容
  • 原文地址:https://www.cnblogs.com/wind128/p/4445573.html
Copyright © 2011-2022 走看看