Emmet 如何提高自己的开发效率

Emmet 如何提高自己的开发效率

BUG集散地

2018-09-11 08:40 阅读 50 喜欢 0 emmet 前端 编辑器

作为一名前端开发人员来说,有一个比较好的工具会提高开发效率,不管是调试还是书写,这里推荐一个快速书写的利器:Emmet.

简介

Emmet的前身是大名鼎鼎的Zen coding,它根据CSS选择器的写法,来提高HTML/CSS的书写速度。 emmet 主要有以下几个特点: 1.快速编写HTML 初始化、轻松添加类和ID等属性、嵌套、分组、隐式标签、定义多个元素、定义多个带属性的元素、 2.CSS缩写 值、附加属性、模糊匹配、浏览器兼容

先看一个例子

快速编码

下面主要介绍下Emmet的语法使用

一、初始化

我们在创建网页后,需要每次初始化一些标签,比如文档声明、head、body 等,现在我们只需要一个 ! 就可以实现啦。 具体操作方式:输入“!”或“html:5”,然后按Tab键 初始化使用方法

是不是很酷哦~~ html:5 或!:用于HTML5文档类型 html:xt:用于XHTML过渡文档类型 html:4s:用于HTML4严格文档类型

二、轻松添加类、属性

比如如果我们要打出这样的一段代码: <div class="test" name="password"></div> 我们只需要这样:

.test[name=password] 然后按下TAB健即可。

快速编写属性和类

三、嵌套

我们在编写多层嵌套的时候可以更加的快速,如下面的代码:

<div class="index">
      <div class="index-title"></div>
</div>

我们只需要这样:

.index>.index-title 然后按下TAB健即可

快速编写嵌套结构

>:子元素符号,表示嵌套的元素 +:同级标签符号 ^:可以使该符号前的标签提升一行

四、分组

例子:

<div class="index1">
    <h1>1</h1>
</div>
 <div class="index2">
    <h2>2</h2>
</div>

我们只需要要这样子:

(.index1>h1{1})+(.index2>h2{2}) 然后按下TAB键即可。

上图: 快速分组

五、隐式标签

声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。 在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。

隐式标签

六、定义多个相同元素

比如我们如果下li标签的时候

<ul>
  <li>1</li>
  <li></li>  
 <li></li>
  <li></li>
</ul>

我们可以这样

ul>li*5 然后按下TAB键。


CSS 快速编写

一、值

比如我们在写 width:100px的时候,只需要 w100 即可。

快速书写CSS值

p 表示%
e 表示 em
x 表示 ex
二、附加属性

可能你之前已经了解了一些缩写,比如 @f,可以生成: Css代码

@font-face {  
       font-family:;  
      src:url();  
}  

一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

附加属性

三、浏览器兼容

在我们书写CSS的时候,经常会有浏览器兼容的写法,比如:-webkit- , -o-等等的时候是不是感觉很无力,各种复制..,有了它我们可以这样: -transform ,在前面加上一个“-” ,如果只是想某一种的话,可以-webkit-trf,如图:

浏览器兼容写法


如何使用?

好啦,前面大体说完啦,不是很全面,大家可以去网上照一下相关资料,这里简单说明下如何使用这个插件。 额,主要就是安装,我现在在两个编辑器上使用这个,一个是sublime text2 一个是MyEclipse .

sublime text2 安装emmet

直接 CTRL+SHIFT+P ,输入 package install ,回车,然后搜索emmet 安装即可,很简单,当然这里说的是如何安装package

1.ctrl + ~ 快捷键,调出 console 2.输入python 代码回车。 import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp )ifnot os.path.exists(ipp)elseNone; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler())); open( os.path.join( ipp, pf),'wb').write( urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation') 3.上面的是sublime text2 的代码,下面的是sublime text3的代码 import urllib.request,os; 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('http://sublime.wbond.net/'+ pf.replace(' ','%20')).read())

MyEclipse 安装emmet

额。没啥说的,在线安装地址 http://emmet.io/eclipse/updates/ ,然后一路点击即可。 重启完毕后设置一下快捷键。

myeclipse快捷键设置


虽然大部分是从网上找的,不过也是一点一滴code来的..

参考文章:http://www.iteye.com/news/27580

转载请注明出处: https://chrunlee.cn/article/web-emmet-learn.html


如果对你有用的话,请赏给作者一个馒头吧 ...或帮点下页面底部的广告,感谢!!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
关于自动签到,之前也有过,感觉写过好多次了,有可能也重复了,不过这次是通过puppeteer来实现的,相对于之前的phantomjs 或 casperjs 或 request 等最起码会更简单些,也不用安装这么多稀奇古怪的东西。
傅里叶啊傅里叶 要掐死你啦..
对于视频,音频等的处理,使用ffmpeg还是很方便的,但是由于命令繁多,又不好记忆,这里整理下个人常用的几个命令,后续方便查找。
简单记录下openssl 编译x64 以及在visual studio 中附加openssl库的过程,过程很简单,不过不是我的专业,所以比较耗时.. 很多小细节的问题。
最近一直在了解关于个人支付的问题。由于之前一直想实现个人支付,但是目前微信和支付宝的支付接口都需要企业或个体户资质,导致没办法实现,无奈只能走向这个道路。 说是免签,实际上就是拿到收款金额来做些事情。
这不是之前做了一个磁力小站么.. 发现之前好多记录都是重复的(不要问我怎么发现的),就删除下,感觉不难,但总是写不对.. 这里纯粹记下sql.
在写前端页面的时候,反复操作的是切换,写完代码,切换到浏览器,然后刷新,查看效果,不合适,然后再切换回编辑器,然后修改,这样反复操作。livereload 释放了双手,自动刷新(尤其是双屏的同学特别友好)
windows 环境下有时候会使用curl工具来测试一些接口或页面,这里简单记录下在windows环境下的安装步骤。