emmet高級技巧

編寫好HTML和CSS代碼時，我們也需要修改或添加一些內容，Emmet提供了很多非常獨特的工具，可以大大提高編輯體驗，下面我們挑選幾個常用的功能來介紹。

薩龍龍發現在sublime text中安裝的Emmet插件的快捷鍵與官方的演示文檔中提供的快捷鍵不一樣，這時我們就要修改Emmet快捷鍵或者查找在sublime text中的Emmet快捷鍵。

修改快捷鍵，打開PreFerences——Package Settings——Emmet中進行修改，只查看快捷鍵，比如：Match Tag Pair快捷鍵，打開工具中的命令面板ctrl+shift+p，輸入：match就可以查看到。

本文的使用到的快捷鍵與官方演示中的快捷鍵一樣。

1、展開縮寫（Expand Abbreviation） Demo

這個功能在一開始介紹Emmet時就已經介紹，這是Emmet最核心的功能。

2、生成測試文本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個單詞的文本，可以為它指定單詞的數量來隨機生成一大段文本。

3、如果要生成標題呢，只需減少單詞的數量，比如：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代碼的速度，讓我們專心編寫代碼。

4、擴展縮寫（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>

5、把文本轉換成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，只需使用單獨的操作符*就可以。

若要設置class="nav-item001"，則用：

nav>ul.nav>li.nav-item$$$*>a

6、刪除文本中的列表標記

word文檔中的文本很多都是列表塊，比如：

1.首頁
2.公司簡介
3.公司動態
4.關於我們
5.聯系我們

在編寫HTML代碼又不需要，Emmet讓我們可以刪除文本中的標記，在上一功能的縮寫的基礎代碼的后面添加|t就可以刪除文本中的標記:

nav>ul.nav>li.nav-item$*>a|t

最終得到的HTML代碼與上面的效果是一樣的，你可以試試！

7、控制文本的輸出位置

默認情況下，用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>

8、分解與添加標簽（Split/Join Tag）Demo

光標在標簽上時，按ctrl+j，可以將標簽：

<div></div>

轉換為

<div />

標簽，反之亦然。當div中有內容時，使用這一功能一樣會轉換成上一標簽，其中的內容也將刪除，所以使用的時候我們也需要注意。

9、映射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+shift+r快捷鍵，其它相關的屬性值也相應的改變。

10、選擇匹配標簽（Match Tag Pair）Demo

在我們編寫HTML代碼時，需要選擇開始標簽到閉合標簽中的代碼，一般我們就用鼠標框選，雖然不是太麻煩，但Emmet為我們提供了更加方便、快捷的功能，擴大與縮少選擇。

在鼠標光標處按快捷鍵ctrl+d，將會選擇光標所在標簽范圍內的所有內容，多次運行將擴大選擇。有擴大就有縮小，快捷鍵：crtl+shift+d，多次運行將縮小選擇范圍。

11、轉到匹配的標簽（Go to Matching Pair）Demo

在開始標簽與閉合標簽中跳轉，快捷鍵：ctrl+t。在編寫大型HTML文件時，總是找不到匹配的閉合標簽，Emmet提供的這一功能就可以方便的為我們在開始與閉合標簽中輕松地跳轉。

12、跳轉到文本編輯點（Go to Edit Point）Demo

這個功能適合在標記之間、空屬性和空的文章標簽中進行上下跳轉，比如title、a、li、href、src等等需要輸入內容的標題中。上一個，下一個編輯點快捷鍵分別為ctrl+alt+left、ctrl+alt+right。

13、添加與刪除注釋（Toggle Comment）Demo

之前在添加注釋時都是一個符號一個的敲出來的，真有點辛苦，也很煩。Emmet提供的注釋開關功能太棒了，只需使用ctrl+/快捷鍵就可以添加與刪除注釋，不過其注釋的范圍是以行為單位，在HTML和CSS代碼中都可以使用。

14、移除標簽（Remove Tag）Demo

在一些大型的HTML代碼中，有時標簽嵌套的太多，通過Emmet移除標簽這一功能，快速的移除多余的匹配的開始標簽與閉合標簽，快捷鍵：ctrl+shift+;(in windows)。

15、更新圖片大小（Update Image Size）Demo

很多時候在編寫HTML代碼中的img標題與CSS樣式中的background-image時，需要知道圖片的寬度與高度，總是在電腦中找到圖片查看其尺寸，浪費時間又很不爽。而Emmet為我們提供這一功能，只需將光標移動到img或background-image標簽上，按下ctrl+u(in windows)，Emmet會自動讀取圖片的尺寸並添加。

前提是引用的圖片地址正確且存在，而且路徑中不能有中文，必需是英文字符，不然把鍵盤敲爛也不會有反應。

16、數字遞增/遞減（Increment/Decrement Number）Demo

數字遞增/遞減，可以以0.1、1和10三個值進行遞增/遞減，快捷鍵分別是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。

17、數學計算表達式（Evaluate Math Expression）Demo

有了Emmet在HTML和CSS文件中都可以進行簡單的數字運算，神奇了，輸入4*8再按ctrl+shift+y，Emmet能給出最終的結果。

18、將圖片編譯成data:URL模式（Encode/Decode Image to data:URL）Demo

data:URL模式，是利用base64編碼把圖片數據翻譯成標准ASCII字符，在本地直接繪制圖片，不是從服務器加載，減小HTTP請求，從而提高網頁的加載速度。

將圖片轉換成data:URL模式，Emmet為我們提供的最簡便、快速的方法，將光標放在img或background-image標簽的圖片上，按ctrl+shift+b快捷鍵，完美的轉換。

 

原文出至：http://yfdxs.com/emmet-advanced.html

參考：http://docs.emmet.io/actions/expand-abbreviation/

標紅處做出了修改