用sublime text 3下载编辑网页,安装了emmet插件,输入html按tab键会自动添加代码,但是输入xhtml按tab没反应

SublimeText3插件安装及Emmet失效问题 - 简书
SublimeText3插件安装及Emmet失效问题
软件下载:
这篇文章提供的是Windows x64的,其他的环境自行去官网下载
直接下载安装包安装:
打开编辑器,点击Preferences/Browse Packages打开插件安装目录,将压缩包解压到这个文件夹,重启即可
QQ截图33.png-11.7kB
通过Package Control进行在线安装:
1.Package Control安装
进入可以看到有如下的代码:
QQ截图42.png-87.4kB
通过快捷键ctrl+`打开控制台,将上面看到的代码复制进去按Enter键就可以了。
注意黄色的警告:官网的这段代码是会不断更新的,所以不要从别的地方复制
QQ截图40.png-13kB
2.通过 Package Control 安装插件(这里以Emmet为例)
使用ctrl+shift+p打开命令面板,输入install选择 Install Package按Enter键
QQ截图34.png-6.5kB
等待一下,它会列出一些插件:
QQ截图44.png-21.7kB
输入Emmet按Enter键等待安装即可,如果网络不好,安装失败只能通过下载安装包了。
安装完后会出现Package Control Messages的
3.常见问题
使用插件时出现:please wait a bit while pyV8 binary错误,
解决方法:
下载PyV8,地址在文首
解压修改文件名为PyV8,放到Installed Packages文件夹下。
完整路径:C:\Users\asus\AppData\Roaming\Sublime Text 3\Installed Packages
注意:我发现win64的文件结构是这样的:Installed Packages\PyV8\win64-p3
插件无法正常使用:
发现Emmet的快捷键除了Tab都无法使用,而且Emmet的语法完全不起效果,
比如:输入.a+.b,得到的是.a+.&b&&/b&;输入table&tr&td得到的是table&tr&&td&&/td&
解决方法:
发现在Packages文件夹下也有一个PyV8的文件夹,删掉这个文件夹,重启一下就好了
微信公众号:aitcat
不定期推送一些好文
作者:德淸原文地址:http://qiudeqing.com/tools//sublime-text-3.html 概述 Sublime Text3下载地址:http://www.sublimetext.com/3。本文所有操作都是基于Sublime T...
Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比于难于上手的Vim,浮肿沉重的Eclipse,VS,即便体积轻巧迅速启动的Editplus、Notepad++,在...
Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比于难于上手的Vim,浮肿沉重的Eclipse,VS,即便体积轻巧迅速启动的Editplus、Notepad++,在...
二、安装错误情形 下面汇总了安装过程中可能出现的一些常见问题: 情形一:PackageControl:There are no packages available for installation 据StackOverflow上说是IPv6造成,如果我们的Intent服务...
http://www.jianshu.com/p/25cdc7d608bb 1.下载Sublime Text:http://www.sublimetext.com。终身免费。界面炫酷,简单小巧。 2.Sublime默认没有 Nodejs 语法高亮与自动补全,需要下载 Nod...
爱情的结晶,不仅仅是有个可爱的小宝宝。 喜迎小生命,为之付出努力,营造绝佳的好环境,也是爱的另一种诠释。 家,无疑是最好的栖息地,最好的港湾。 相比较买新房,二手房大多数是现房,小区配套、基础设施及其房屋本身比较明了清晰,有一些不必要的麻烦可以规避掉。 小睦觉得好的房子也是...
信阳焦点班 谢芳持续分享第16天
今天结束了为期十二次的网络绘画课程。在长达两个多月的浸泡中,对绘画这门技术有了较为明晰的理解和认识。越深入的走进一门技术,越感觉自己需要努力,需要持续的精进。还好,我已经在路上。绘画技术特别的神奇,它以精神分析,认知...
一个丽人群里有个话题,在控诉各种奇葩婆婆的坏。控诉的跟帖里,各种奇葩媳妇,不知道是不是都生了女儿,以后都好命滴做外婆。 有个ID妖女,说自己生了孩子,婆婆不但人来,几乎把家都搬来了,说婆婆嫌弃电动磨豆浆味道不好,让公公把家里的小石磨连架子都给送来,那丑陋的石磨占据了她家阳台...
下吧,下吧 我在洗擦 洗去的是尘埃 擦掉的是垢痂 酷暑过后的清秋 细雨宛如绵绵的轻纱 沉醉了大地 沉醉了我的家 下吧,下吧 我要洗刷 洗掉的是陈腐 刷新的是光华 蒙蒙细雨绿树葱葱 温柔地浇灌着娇媚的花 滋润我的心田 滋润我理想的朝霞 挥起扫把 穿起马甲 城市的脏乱差 瞬间就...
我不敢给你吻 因为我怕 当我离去 你也随之凋零 我不敢放歌 因为我怕 当我苍老 你听不到爱 我不敢告诉你世界美妙 因为我怕 当你不得不离开 会有不舍 所以我保持沉默 像一个路人在前端界,作为快速生成代码的Emmet插件相当给力。最近在学bootstrap,需要频繁生成html头文件,我就想着自定义模板。国内只有基础教程,只好自己读英文文档了。
Emmet国内基础教程地址:
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
http://blog.wpjam.com/m/emmet/
读了一些发现一个解决方案,原文是。
工具栏打开Preferences -& Package Settings -& Emmet -& Setting - Default菜单(我这里是line 101),这个是参考
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
// "html": {
"abbreviations": {
"example": "&div class='example' title='Custom element example'&"
用户配置文件中修改。我们打开Preferences -& Package Settings -& Emmet -& Setting - User文件,添加如下代码:
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"abbreviations": {
"example": "&div class='example' title='Custom element example'&",
"mydoc": "html&(head&meta[charset='utf-8']+title{${1:文档标题}})+body",
"!!": "!!!+mydoc[lang='zh-Hans']"
  1.example是快捷键,后面是生成的内容
  2.引用mydoc的内容 mydoc[lang='zh-Hans']中可以指定语言
自定义模板
  可写入自己需要的css,js文件(库)
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"snippets": {
"myfavicon": "&!-- favicon,可更改图片类型 --&\n&link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" /&\n",
"mycompat": "&!-- 优先使用 IE 最新版本和 Chrome --&\n&meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" /&\n",
"360compat": "\n&!-- 360 使用Google Chrome Frame --&\n&meta name=\"renderer\" content=\"webkit\"&\n",
"mykeywords": "&!-- SEO页面关键词 --&\n&meta name=\"keywords\" content=\"your keywords\"&\n",
"mydesc": "&!-- SEO页面描述 --&\n&meta name=\"description\" content=\"your description\"&\n",
"myviewport": "&!-- 开启响应式 --&\n&meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&\n",
"abbreviations": {
"example": "&div class='example' title='Custom element example'&",
"mydoc": "html&(head&meta[charset='utf-8']+title{${1:文档标题}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body&jq+u",
"!!": "!!!+mydoc[lang='zh-cmn-Hans']",
"$": "&script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"&&/script&",
"jq": "&script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"&&/script&",
"u": "&script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"&&/script&",
"_": "&script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"&&/script&"
snippets是指head头部的片段
addbreviations是body内的片段
在mydoc中引用要使用的片段,最终!!引用mydoc,如果需要多套模板,可按需定制。
生成如下代码:
&!DOCTYPE html&
&html lang="zh-cmn-Hans"&
&meta charset="utf-8"&
&title&文档标题&/title&
&!-- 360 使用Google Chrome Frame --&
&meta name="renderer" content="webkit"&
&!-- 优先使用 IE 最新版本和 Chrome --&
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&
&!-- 开启响应式 --&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- SEO页面关键词 --&
&meta name="keywords" content="your keywords"&
&!-- SEO页面描述 --&
&meta name="description" content="your description"&
&!-- favicon,可更改图片类型 --&
&link rel="shortcut icon" type="image/ico" href="/favicon.ico" /&
&script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"&&/script&
&script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"&&/script&
下面是本人定制的模板:
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"snippets": {
"myfavicon": "&!-- favicon,可更改图片类型 --&\n&link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" /&\n",
"bscss3":"&link rel=\"stylesheet\" href=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css\"&",
"mycompat": "&!-- 优先使用 IE 最新版本和 Chrome --&\n&meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" /&\n",
"360compat": "\n&!-- 360 使用Google Chrome Frame --&\n&meta name=\"renderer\" content=\"webkit\"&\n",
"mykeywords": "&!-- SEO页面关键词 --&\n&meta name=\"keywords\" content=\"your keywords\"&\n",
"mydesc": "&!-- SEO页面描述 --&\n&meta name=\"description\" content=\"your description\"&\n",
"myviewport": "&!-- 开启响应式 --&\n&meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&\n",
"abbreviations": {
"mydoc": "html&(head&meta[charset='utf-8']+title{${1:文档标题}}+mycompat+myviewport+mykeywords+mydesc+bscss3)+body&bsjq2+bs3",
"!!bs": "!!!+mydoc[lang='zh-cmn-Hans']",
"bsjq2":"&script src=\"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js\"&&/script&",
"bs3":"&script src=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js\"&&/script&"
生成如下代码:
&!DOCTYPE html&
&html lang="zh-cmn-Hans"&
&meta charset="utf-8"&
&title&文档标题&/title&
&!-- 优先使用 IE 最新版本和 Chrome --&
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&
&!-- 开启响应式 --&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- SEO页面关键词 --&
&meta name="keywords" content="your keywords"&
&!-- SEO页面描述 --&
&meta name="description" content="your description"&
&link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"&
&script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"&&/script&
&script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"&&/script&
  1.插入代码时,编辑器没有json一项,我选的XML
  2.个人并不喜欢重写(抄袭)别人的代码,只是emmet自定义模板我找了好久,不容易,希望给需要的朋友一点帮助。
  3.如有其他问题请在下方留言。
阅读(...) 评论()sublime 中为什么安装了emmet还是没有代码提示_百度知道
sublime 中为什么安装了emmet还是没有代码提示
答题抽奖
首次认真答题后
即可获得3次抽奖机会,100%中奖。
来自电脑网络类芝麻团
这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的。先关闭Sublime text 3:第一步:下载sublime_package_control-master.zip ,解压命名文件夹为Package Control。(注意大小写)第二步:下载sublime_package_control-python3.zip,解压后覆盖到刚刚的Package Control中,完成插件API函数的更新。第三步:打开Sublime Text 3,选择菜单:Preference--&Browse Package... 浏览插件第四步:把package control复制到此目录,重启 Sublime text 3。然后菜单Preferences就会多了两个Package..的东西如下: Package Control 安装成功第五步:点击菜单Preference--&Package Control点击Install Package等待几秒后再弹出如下内容,敲键盘emmet,选择如下:在 Emmet 安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启 Sublime Text 3。搜索框没有emmet相关内容,手动把emmet插件放入第三步打开的文件夹,emmet插件下载&&测试:重启之后还会看到左下角再次呈现 Loading PyV8 的提示,待其载入完毕,打开一个新文档最后测试,输入指令(不行就再重启一下)ul#test&li*4按Ctrl+e 生成---&ul id=&test&&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&/ul&相关:下载sublime text3
为你推荐:
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何在SublimeText3中安装Emmet(前端神器)插件
如何在SublimeText3中安装Emmet(前端神器)插件,由于最近因为做项目的需求不得不接触学习前端,然后就接触到了一个很好用的编辑器sublime text3,之前听过很多人推荐过这个编辑器,但是一直没用,不用不知道,用完之后简直太爽了,比之前写python用的IDLE还有notepad++好用太多了,不扯淡了,切入正题吧,网上很多大神都说sublime用来写前端也特别厉害,所以我在学习的过程中一直用它,而没有用Hbuilder(同学给推荐的)。然后说有一个插件配上这个sublime text3就更牛X了,当然我跃跃欲试,所以就下载下来,安装过程中也遇到一些麻烦,希望写这个也为可以方便其他人吧,来吧,开始吧:
1. 在Sublime text3中打开控制台
Ctrl+~这个组合键就可以打开了,打开以后如图所示
当然也可以用鼠标点击打开
2、在控制台中输入如下(直接复制粘贴就行):
这里说明一下,在网上找的版本有可能是导入的是urllib2这个库,但是在Sublime Text3中已经内置好3 所以遇到这快一定要注意更改为urllib.request
import urllib.request, pf = 'Package Control.sublime-package'; ipp
= sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'https://sublime.wbond.net/' + pf.replace(' ','%20')).read())
3、打开Package Control
直接在Package Control:后面键入Install Package 回车就OK
wait a minute!就会弹出这个:
然后输入咱们要下载的插件Emmet:
因为我已经安装好了插件,所以没有出现,在没有安装的时候会出现Emmet 然后选中回车就OK
4、然后在控制台中会的到一个链接,然后在中输入这个链接就会自动的进行下载,没错就是我箭头所指的这个地方
5、下载完成后进入这个目录
C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages\PyV8
然后吧你所下载的zip在PyV8中进行解压,如果没有PyV8这个目录自己创建就OK
6、重启Sublime Text3就OK了(如果可以看到这个就说明安装成功了)
7、看下它有多快
然后按下Tab自动生成键
还有很多功能需要自己体会,有了这个东西,希望我的前端快点学完!!!}

我要回帖

更多关于 sublime text教程 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信