sublime Emmet前端开发神器的安装和使用

2018年2月4日20:37:14 发表评论 32

刚开始了解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(' ','%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就可以生成下面这些代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

2、生成ID和CLASS

输入p#p1+div.div1,可得到

  1. <p id="p1"></p>
  2. <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手册,建议学习前端的同学把全部命令过一遍,因为这对的你工作效率有大大的提高,我深有感受。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: