Emmet的高级功能与使用技巧

来自：http://www.douban.com/note/299431625/?qq-pf-to=pcqq.group

---

前端开发工具Emmet的介绍，Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途，编写HTML代码和CSS样式，今天再来介绍下Emmet的一些高级功能和使用技巧。
编写好HTML和CSS代码时，我们也需要修改或添加一些内容，Emmet提供了很多非常独特的工具，可以大大提高编辑体验，下面我们挑选几个常用的功能来介绍。
萨龙龙发现在sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不一样，这时我们就要修改Emmet快捷键或者查找在sublime text中的Emmet快捷键。
修改快捷键，打开PreFerences——Package Settings——Emmet中进行修改，只查看快捷键，比如：Match Tag Pair快捷键，打开工具中的命令面板ctrl+shift+p，输入：match就可以查看到。
本文的使用到的快捷键与官方演示中的快捷键一样。
展开缩写（Expand Abbreviation） Demo

 

这个功能在一开始介绍Emmet时就已经介绍，这是Emmet最核心的功能。

生成测试文本Lorem Ipsum Demo在编写HTML代码时，有时需要添加一些内容，Emmet提供了一段随机的看不懂的英文字段，作为测试数据我们就可以调用。而生成Lorem Ipsum文本也非常简单，输入lorem，按Tab键，就可以生成下面这段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus    
voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,    
voluptatem nesciunt voluptate ad veritatis.  
Emmet的lorem这一功能不仅仅只为生成一段文本，使用lorem默认生成30个单词的文本，可以为它指定单词的数量来随机生成一大段文本。
如果要生成标题呢，只需减少单词的数量，比如：lorem4将生成下面的标题：
Lorem ipsum dolor sit.  
上面的例子只是生成单独的测试文本，与HTML标签一起编写也很简单，就像Emmet快速编写HTML代码文章中生成父子关系的代码一样：
h2>lorem4  
将生成：
<h2>Lorem ipsum dolor sit.</h2>  
p*4>lorem4  
将生成：
<p>Lorem ipsum dolor sit.</p>  
<p>Dolores, similique veritatis reprehenderit.</p>  
<p>Cupiditate repudiandae numquam earum.</p>  
<p>Atque, sequi autem praesentium?</p>  
所以lorem为我们提供了强大的测试数据，提高了编写HTML代码的速度，让我们专心编写代码。

---

扩展缩写（Wrap with Abbreviation）Demo
一个非常强大的功能，在当前HTML代码的基础上添加缩写，将向外扩展代码，比如这段代码，光标在p标签上或者外部：
<div id="page">  
    <p>Hello world</p>  
</div>  
再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：
.wrapper>h1{Title}+.content  
将得到：
<div id="page">  
    <div class="wrapper">  
        <h1>Title</h1>  
        <div class="content">  
            <p>Hello world</p>  
        </div>  
    </div>  
</div>  
把文本转换成HTML标签当客户给我们提供了一个文本文档，把标题复制过来，比如：
首页   
公司简介   
公司动态   
关于我们   
联系我们  
转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：
nav>ul.nav>li.nav-item$*>a  
将得到：
<nav>  
    <ul class="nav">  
        <li class="nav-item1"><a href="">首页</a></li>  
        <li class="nav-item2"><a href="">公司简介</a></li>  
        <li class="nav-item3"><a href="">公司动态</a></li>  
        <li class="nav-item4"><a href="">关于我们</a></li>  
        <li class="nav-item5"><a href="">联系我们</a></li>  
    </ul>  
</nav>  
注意，导航中有5个菜单，这里不需要在li标签后面使用*5，只需使用单独的操作符*就可以。
删除文本中的列表标记word文档中的文本很多都是列表块，比如：
1.首页   
2.公司简介   
3.公司动态   
4.关于我们   
5.联系我们  
在编写HTML代码又不需要，Emmet让我们可以删除文本中的标记，在上一功能的缩写的基础代码的后面添加|t就可以删除文本中的标记:
nav>ul.nav>li.nav-item$*>a|t  
最终得到的HTML代码与上面的效果是一样的，你可以试试！
控制文本的输出位置默认情况下，用Emmet把文本转换为HTML代码时，使用$#操作符Emmet可以将文本输出到多个元素中，而$#平上Emmet缩写语法中的一部分，所以得将$#放在属性值[]或文本{}操作符中。
以上面的导航文本为例，在Enter Wrap Abbreviation中输入：
ul>li[title=$#]*>{$#}+img[alt=$#]  
将得到：
<ul>  
    <li title="首页">首页<img src="" alt="首页"></li>  
    <li title="公司简介">公司简介<img src="" alt="公司简介"></li>  
    <li title="公司动态">公司动态<img src="" alt="公司动态"></li>  
    <li title="关于我们">关于我们<img src="" alt="关于我们"></li>  
    <li title="联系我们">联系我们<img src="" alt="联系我们"></li>  
</ul>  
分解与添加标签（Split/Join Tag）Demo
光标在标签上时，按ctrl+j，可以将标签：
<div></div>  
转换为
<div />  
标签，反之亦然。当div中有内容时，使用这一功能一样会转换成上一标签，其中的内容也将删除，所以使用的时候我们也需要注意。
映射CSS属性值（Reflect CSS Value）Demo为了浏览器的兼容性，CSS样式中有很多带有属性值的前缀样式，如果修改值，需要修改好几个处，比如：
div {   
    padding: 10px;   
    -webkit-transform: rotate(50deg);   
    -moz-transform: rotate(50deg);   
    -ms-transform: rotate(50deg);   
    -o-transform: rotate(50deg);   
    transform: rotate(50deg);   
    opacity: 0.7;   
    filter: alpha(opacity=70);   
}  
在Emmet中我们只需修改旋转属性值的其中一个，再按ctrl+b快捷键，其它相关的属性值也相应的改变。
选择匹配标签（Match Tag Pair）Demo
在我们编写HTML代码时，需要选择开始标签到闭合标签中的代码，一般我们就用鼠标框选，虽然不是太麻烦，但Emmet为我们提供了更加方便、快捷的功能，扩大与缩少选择。
在鼠标光标处按快捷键ctrl+d，将会选择光标所在标签范围内的所有内容，多次运行将扩大选择。有扩大就有缩小，快捷键：crtl+shift+d，多次运行将缩小选择范围。
转到匹配的标签（Go to Matching Pair）Demo
在开始标签与闭合标签中跳转，快捷键：ctrl+t。在编写大型HTML文件时，总是找不到匹配的闭合标签，Emmet提供的这一功能就可以方便的为我们在开始与闭合标签中轻松地跳转。
跳转到文本编辑点（Go to Edit Point）Demo这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转，比如title、a、li、href、src等等需要输入内容的标题中。上一个，下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。
添加与删除注释（Toggle Comment）Demo
之前在添加注释时都是一个符号一个的敲出来的，真有点辛苦，也很烦。Emmet提供的注释开关功能太棒了，只需使用ctrl+/快捷键就可以添加与删除注释，不过其注释的范围是以行为单位，在HTML和CSS代码中都可以使用。
移除标签（Remove Tag）Demo
在一些大型的HTML代码中，有时标签嵌套的太多，通过Emmet移除标签这一功能，快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+k。
更新图片大小（Update Image Size）Demo很多时候在编写HTML代码中的img标题与CSS样式中的background-image时，需要知道图片的宽度与高度，总是在电脑中找到图片查看其尺寸，浪费时间又很不爽。而Emmet为我们提供这一功能，只需将光标移动到img或background-image标签上，按下ctrl+shift+u，Emmet会自动读取图片的尺寸并添加。
前提是引用的图片地址正确且存在，而且路径中不能有中文，必需是英文字符，不然把键盘敲烂也不会有反应。
数字递增/递减（Increment/Decrement Number）Demo数字递增/递减，可以以0.1、1和10三个值进行递增/递减，快捷键分别是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。
数学计算表达式（Evaluate Math Expression）Demo有了Emmet在HTML和CSS文件中都可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。
将图片编译成data:URL模式（Encode/Decode Image to data:URL）Demodata:URL模式，是利用base64编码把图片数据翻译成标准ASCII字符，在本地直接绘制图片，不是从服务器加载，减小HTTP请求，从而提高网页的加载速度。
将图片转换成data:URL模式，Emmet为我们提供的最简便、快速的方法，将光标放在img或background-image标签的图片上，按ctrl+shift+l快捷键，完美的转换。
Emmet的一些常用的快捷功能和特性，就介绍到这，现在运用这些功能与特性编写代码时，也许会觉得慢，当熟悉后，编写HTML代码和CSS样式会变得非常快速，将大大提高前端开发效率。
原文链接：http://salonglong.com/emmet-advanced.html