刚开始了解Emmet是从一个同学那听到的，他用的是sublime text3，看他演示了下Emmet的功能，敲一个！然后按下Tab就生成了一个HTML5的网页模板，当时觉得很神奇，特别的好玩，接着他又演示了好多Emmet中的命令，使用ul>li*100一下就生成一个ul和一大片的li标签，那时我就迫不及待的百度了解了下sublime这个编辑器，不过没太注意这个叫做Emmet的东西，直至上一年深入学习Emmet才彻底了把它的命令全部过了一遍，使得我之后写码速度提高了50%，现在我一直是使用的sublime中的Emmet写代码的，下面先讲一下在sublime中如何安装Emmet。
sublime Emmet前端开发神器的安装和使用
sublime Emmet安装
1、如果你sublime中没有安装过任何插件，那么我想你可能没有安装Package Control组件（安装过了的忽略），按ctrl+`调出sublime的console，粘贴下面的代码到询问命令行并回车：
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](http://www.zcbboke.com/wp-content/themes/begin5.2/inc/go.php?url=http://sublime.wbond.net/%27+pf.replace)(' ','%20')).read())
重启sublime，如果在perferences->package settings中看到了package control，则表示安装成功了。
2、现在使用Package Control安装Emmet插件：按快捷键ctrl_shift+p打开命令板，输入install选择install Package，然后输入emmet找到Emmet Css Snippets，点击就可以自动安装了。
sublime Emmet使用
1、生成HTML5模板
按下！，再按ctrl+e就可以生成下面这些代码
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
</head>
-
<body>
-
</body>
-
</html>
2、生成ID和CLASS
输入p#p1+div.div1，可得到
- <p id="p1"></p>
- <div class="div1"></div>
3、嵌套
-
：嵌套的元素
- +：同级标签符号
- ^：可以使该符号前的标签提升一行
sublime Emmet前端开发神器的安装和使用
4、分组
可以通过分组和嵌套来快速重大量的代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：
sublime Emmet前端开发神器的安装和使用
5、定义多个元素
使用符号，代表乘号，比如ul>li3就可以生成1个ul嵌套着3个li
sublime Emmet前端开发神器的安装和使用
命令有很多，还有一些关于Emmet 快速写CSS的命令就不讲了，大家可以在官网查看所有的Emmet命令，更加的简单易懂，一本综合的查询手册：Emmet手册，建议学习前端的同学把全部命令过一遍，因为这对的你工作效率有大大的提高，我深有感受。
我的博客原文地址：http://www.zcbboke.com/1294.html
网友评论