sublime text 3 中emmet 快捷键ctrl e冲突

sublime text 3 中emmet 快捷键ctrl e冲突,第1张

这是Sublimetext3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的。先关闭Sublimetext3:第一步:下载sublime_package_control-master.zip,解压命名文件夹为PackageControl。(注意大小写)第二步:下载sublime_package_control-python3.zip,解压后覆盖到刚刚的PackageControl中,完成插件API函数的更新。第三步:打开SublimeText3,选择菜单:Preference-->BrowsePackage浏览插件第四步:把packagecontrol复制到此目录,重启Sublimetext3。然后菜单Preferences就会多了两个Package..的东西如下:PackageControl安装成功第五步:点击菜单Preference-->PackageControl点击InstallPackage等待几秒后再d出如下内容,敲键盘emmet,选择如下:在Emmet安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启SublimeText3。搜索框没有emmet相关内容,手动把emmet插件放入第三步打开的文件夹,emmet插件下载>>测试:重启之后还会看到左下角再次呈现LoadingPyV8的提示,待其载入完毕,打开一个新文档最后测试,输入指令(不行就再重启一下)ul#test>li*4按Ctrl+e生成

对于前端来说,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/htmlcharset=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”,在d出的警告框中选择“是”,移除 “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/htmlcharset=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” 快捷键。

参考地址:http://www.cnblogs.com/wind128/p/4445573.html


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/tougao/11113470.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-13
下一篇2023-05-13

发表评论

登录后才能评论

评论列表(0条)

    保存