Emmet插件使用方法总结

Emmet插件使用方法总结

      在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet(前身是Zen Coding)，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

一、安装emmet：packages安装

下面方法适用于 sublime text 3。

1、安装 Package ctrl： 使用 ctrl + ～ 打开控制台，输入以下代码：

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())

2、在 Package ctrl 中选择 Install package；

3、搜索 emmet 并安装。

二、快速编写HTML代码 

先来看一下这个插件的效果，

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：

基本语法：

1、生成后代元素：>      大于号表示后面要生成的内容是当前标签的后代

命令：nav>ul>li 

每个命令输完后按下Tab键即可快速得到代码

2、生成兄弟元素：+     加号表示后面的元素和前面的元素是兄弟元素

命令：div+p+bq   得到代码如下：

3、生成上级元素：^   表示^后面的元素与^前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

命令：div+div>p>span+em^bq  得到代码如下：

命令：div+div>p>span+em^^bq  得到代码如下：

4、生成类名： .    Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在

中输入.item，就会生成
。 

命令：.container 得到代码如下：

如果想生成多个类名可连续写

命令： .container.wrapper.more  得到代码如下：

5、生成ID：#   

命令：#container  得到代码如下：

6、生成分组：()    用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

命令：(.foo>h1)+(.bar>h2)  得到代码如下：

7、重复生成多份：*   *号后面是想重复生成的份数

命令：ul>li*5    得到代码如下：

8、对生成内容依次编号：$    $就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5   得到代码如下：

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5  得到代码如下：

同样，我们也可以使用 @N 指定开始的序号

命令：ul>li.item$@3*5  得到代码如下：

至于ul>li.item$@-3*5 生成什么你们自己琢磨吧！

9、生成自定义属性：[attr]   中括号里面的内容是你想添加的属性

命令：td[rowspan=2 colspan=3 title]  得到代码如下：

10、生成文本内容：{}  大括号里面是你想添加的文本内容

命令：a{Click me}  得到代码如下：

Click me

命令：p>{Click }+a{here}+{ to continue}  得到代码如下：

Click hereto continue

到此为止基本语法内容也就这么多，剩下的就是加强理解与练习了。

注意：在写命令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下，这将会导致代码无法使用。但是{}[]中可存在空格

ul>li.item${item$}*3

    

    	
item1
    	
item2
    	
item3
    

 #content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

练习的过程中我们可以试着反推出命令行

    

    	

    		
name
    		
name
    		
name
    		
name
    		
name
    		
name
    	
    

    
    
    	
    	
    	
    	
    	
    
    
    	

    		

    			

    				

    			
    		
    	
    	

    		

    		

    		

    	
    	

    		

    			
article1
    		
    		

    			
article2
    		
    		

    			
article3
    		
    	
    
    
copyright
    

这些代码的命令你反推出来了吗？

1.命令：.header>ul.nav>li*6>a[style=block]>span{name}

2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

 三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

下面只列出一些常用的快速编辑方式

命令：link   


 

 

命令：script:src

命令：img

命令：inp

命令：input:p

命令：btn         结果：

命令：btn：s        结果：

命令：btn：r        结果：

CSS中缩写

单位：

• p 表示%
• e 表示 em
• r表示 rem

宽度：

命令：w100   结果：width:100px; 默认单位px

命令：w100p   结果：width:100%;  

高度：

 命令：h100r   结果：height: 100rem;

颜色：

命令：c#3    结果： color: #333;

命令：c#e0    结果： color: #e0e0e0;

命令：c#fc0    结果： color: #ffcc00;

CSS3前缀：

• w 表示 -webkit-
• m 表示 -moz-
• s 表示 -ms-
• o 表示 -o-

命令：-wmso-transform  

结果：

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

属性模糊匹配：

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的： 

所以在平时使用的时候可留意emmet的提示

命令：h10p+m5e   结果：height: 10%;margin: 5em;

四、定制Emmet插件

• 添加新缩写或更新现有缩写，可修改snippets.json文件
• 更改Emmet过滤器和操作的行为，可修改preferences.json文件
• 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

这里都是英文文档，没有英语基础的同学可就有点抓瞎了。

好了今天就到这里吧！一下子说太多怕接受不了。

 

转载于:https://www.cnblogs.com/jesse131/p/4978966.html