Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度,只需按住Tab键即可把一个简写展开成HTML和CSS的代码块。

在安装Emmet插件之前我们首先需要在Sublime Text3上安装Package Control插件管理器。
安装步骤:
  1.按Ctrl+`调出sublime text的console
  2.粘贴以下代码到底部命令行并回车:

  import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else     None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

  3.重启Sublime Text
  4.在Perferences->package settings中看到package control,则表示安装成功

按住快捷键Ctrl+Shift+P或者在菜单栏选择Perferences-->Package Control即可打开命令面板,如若没有反应稍等一下便会弹出。

打开命令面板找到package control install package,或者在命令面板输入"pcip"即这四个单词的首字母,便会出现新的安装package的面板,然后输入emmet找到Emmet Css Snippets,点击后便会自动安装。
安装完成后可通过Perferences-->Package Settings-->Emmet查看是否成功,如果Emmet在说明安装成功了。

安装完成后我们利用Emmet插件去快速生成HTML代码,例如输入html:5按住Tab键即可生成HTML文件完整的结构,但是很多人在安装完成后输入html:5然后按住Tab键并没有反应,这是什么原因导致的呢?原来Emmet默认的快捷键是Ctrl+E,我们需要将其设置成常用的Tab键。
在菜单栏选择Preferences-->PackageSettings-->Emmet-->KeyBindings-->User,将以下信息粘贴进去即可:
[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]

重启Sublime Text3此时我们便可以进行代码补全操作了,在新创建的文件上输入html:5,按住Tab键即可看到如下的代码。

Sublime插件Emmet的安装及Tab补全代码的更多相关文章

  1. 虚拟机 ---- 最小化安装无法使用tab补全键

    解决方法: 安装 yum -y install bash-completion 然后重启 注意:挂载时使用绝对路径的cdrom挂载,  ls -l /dev/cdromvim /etc/fstab — ...

  2. centos7最小化安装无法tab补全

    yum install -y bash-completion 安装完后reboot重启生效

  3. sublime插件emmet的配置、使用及快捷键Ctrl+E修改成Tab键操作

    一.emmet在sublime中的配置与使用: 1.点击sublime text 3的图标,打开编辑器: 2.按键“ctrl+shift+p”,或者单击菜单->工具->命令面板: 3.打开 ...

  4. centos7安装python3 以及tab补全功能

    1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www. ...

  5. 9.3centos7安装python3 以及tab补全功能

    1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www. ...

  6. 在vim编辑器python实现tab补全功能

    在vim编辑器中实现python tab补全插件有Pydiction,Pydiction可以实现下面python代码的自动补全: 1. 简单python关键词补全 2. python函数补全带括号 3 ...

  7. 在vim编辑器中实现python的tab补全

    在vim编辑器中实现python的tab补全 在vim编辑器中实现python tab补全插件有Pydiction,Pydiction可以实现下面python代码的自动补全:   1.简单python ...

  8. vim编辑python脚本时Tab补全

    所属分类:成长之路 使用Linux写python脚本的时候,初期最痛苦的是什么?当然是各种库的不熟悉,知道了库,里面的方法还要挨个看,挨个记. 所以这时候,很多小伙伴使用了ipython,最强大的功能 ...

  9. 解决debian (Friendly ARM 嵌入式板)的sudo等一部分命令无法TAB补全

    TAB对于比较长的命令在使用时是十分方便的,最近就遇到TAB 键无法补全sudo后跟的命令的情况因此去网上取经.在一篇博客中找到解决问题的方法,觉得大牛们写的太精炼然后自己做如下总结方便自已以后解决类 ...

随机推荐

  1. Java设计模式从精通到入门五 抽象工厂方法模式

    定义 抽象工厂类为创建一组相关和相互依赖的对象提供一组接口,而无需指定一个具体的类. ​ 这里我得把工厂方法模式得定义拿出来做一下比较:定义一个创建对象的接口,由子类决定实例化哪一个类.工厂方法是一个 ...

  2. js几个经典的题目详解

    直接看题目,先不要急着看答案 先自己思考,收获更多 一 var out = 25, inner = { out: 20, func: function () { var out = 30; retur ...

  3. Shell脚本笔记(二)Shell变量

    Shell变量 一)全局环境变量 全局变量对于定义它的shell和其子shell都是可见的,但如果生成它的shell被终止,全局变量也就消失了.另外全局变量会被子shell的同名变量覆盖. #定义一个 ...

  4. Paint the Tree

    Paint the Tree 题目来源: Moscow Pre-Finals Workshop 2018 Day 5 C 题目大意: 一棵\(n(n\le2000)\)个点的树,有\(m(2<m ...

  5. No mapping found for HTTP request with URI [/webapp/] in DispatcherServlet with name 'SpringMVC'

    可能有如下几个原因: 1.是否设置了web目录,在IDEA中,web目录是这样的 如果没有设置,按照下面的方法设置: 选中要设置的模块,点击file.project structure,设置web.x ...

  6. html5页面拨打电话实现的方法

    拨打电话:<p>咨询电话  <a href="tel:17337956096">拨号: 17337956096</a></p> 发送 ...

  7. python实现23种设计模式

    本文源码寄方于github:https://github.com/w392807287/Design_pattern_of_python 参考文献: <大话设计模式>——吴强 <Py ...

  8. Linux之临时配置网络(ip,网关,dns)+永久配置

    作业一:临时配置网络(ip,网关,dns)+永久配置 配置网络信息 [root@localhost ~]# ifconfig eno16777736: flags=4163<UP,BROADCA ...

  9. 【状压dp】Trie 树 @中山纪念中学20170304

    目录 Trie 树 PROBLEM 题目描述 输入 输出 样例输入 样例输出 SOLUTION CODE Trie 树 PROBLEM 题目描述 字母(Trie)树是一个表示一个字符串集合中所有字符串 ...

  10. Mac下安装pyenv

    mac 用virtualenv安装py3.6的虚拟环境报错(virtualenv -p /usr/bin/python3 env36), 解决的话需要安装zlib包, 然后去掉configure配置里 ...