Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度。只需按住Tab键即可把一个简写展开成HTML和CSS的代码块,如下图所示,大部分标签都可自动生成。介绍一种使用在线安装的方式来安装Emmet插件。

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

打开命令面板找到package control install package,或者在命令面板输入"pcip"即这四个单词的首字母,便会出现新的安装package的面板,搜索emmet找到后点击回车键,稍后便会自动安装。

安装完成后可通过Perferences-->Package Settings-->Emmet查看是否成功,如果Emmet在说明安装成功了。

  1. 安装完成后我们利用Emmet插件去快速生成HTML代码,例如输入html:5按住Tab键即可生成HTML文件完整的结构,但是很多人在安装完成后输入html:5然后按住Tab键并没有反应,这是什么原因导致的呢?原来Emmet默认的快捷键是Ctrl+E,我们需要将其设置成常用的Tab键。

  2.  

    在菜单栏选择Preferences-->PackageSettings-->Emmet-->KeyBindings-->User,将以下信息粘贴进去即可。

    [{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]

  3. 7

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

sublime下载emmet的更多相关文章

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

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

  2. sublime Text emmet插件使用手册

    转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工 ...

  3. Sublime text3 Emmet使用

    Emmet需要配置pyv8 进入 https://github.com/emmetio/pyv8-binaries 下载解压文件放入Sublime Installed Packages下面 就可以使用 ...

  4. sublime text3 Emmet (原zenCoding)安装方法

    1.安装使用Package Control组件安装 (1)打开控制台 (mac)control+`; (win)ctrl+` (2)复制一下代码并回车 import urllib.request,os ...

  5. sublime Text3+emmet(快速开发)

    sublime软件使用Emmet插件快速编写CSS样式                    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin.而 ...

  6. Sublime插件Emmet的安装及Tab补全代码

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

  7. sublime 下载 和 破解

    新增可用注册码,无需降级. Sublime Text 3.1 更改了验证方法,之前所有的验证码都已失效,建议降级到3143 版本. 新增3.1 3176 可用注册码 此验证码为sublime text ...

  8. sublime安装emmet

    1,先安装package install 2,然后安装emmet,安装完后会自动load加载Pyv8,如果加载不成功只能手动下载(详情可以百度).

  9. Sublime Text Emmet插件 : 生成html,css 快捷键

    (输入下面简写,按Tab键可触发效果,或者 ctrl + e) html缩写 输入 !后 按下 ctrl + e : 结果 <!DOCTYPE html><html lang=&qu ...

随机推荐

  1. jvm监测

    jvm调优,首先,你得会jvm性能检测.开方得先诊断啊.

  2. 最新版本的JDK安装和配置(Java SE 10.0.2)

    1.废话少说,要么百度JDK,要么直接点传送门http://www.oracle.com/technetwork/java/javase/downloads/index.html.这里需要说的JDK包 ...

  3. Python 列表反转显示方法

    第一种,使用reversed 函数,reversed返回的结果是一个反转的迭代器,我们需要对其进行 list 转换 listNode = [1,2,3,4,5] newList = list(reve ...

  4. vue引入静态js文件

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

  5. 数据存储-cookie、sessionstorage、localstorage

    HTML5 Web Storage sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据.有了本地 ...

  6. 07 归档模式 Active redo log丢失或损坏的恢复

    环境同上一篇 模拟处于active状态的redo log损坏 sesion 1 SYS@ orcl >/ GROUP# THREAD# SEQUENCE# BYTES BLOCKSIZE MEM ...

  7. mysql多对多查询 原生写法

    准备工作,1.创建表 CREATE TABLE IF NOT EXISTS `users` ( `id` INTEGER NOT NULL AUTO_INCREMENT, `name` VARCHAR ...

  8. js数组,运算符

  9. [LeetCode] 834. Sum of Distances in Tree

    LeetCode刷题记录 传送门 Description An undirected, connected treewith N nodes labelled 0...N-1 and N-1 edge ...

  10. ODBC Driver Development

    ODBC Driver Development By Vikash Agarwal, May 01, 2002 Open your database system to the world. Vika ...