前端開發利器 Emmet 介紹與基礎語法教程

在前端開發的過程當中，編寫 HTML、CSS 代碼始終佔據了很大的工做比例。特別是手動編寫 HTML 代碼，效率特別低下，由於須要敲打各類「尖括號」、閉合標籤等。而如今 Emmet 就是爲了提升代碼編寫的效率而誕生的，它提供了一種很是簡練的語法規則，而後馬上生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。

你可能據說過一款強大的功能類似的工具：Zen Coding，那個比較老了，而如今的 Emmet 則是 Zen Coding 的升級版，由 Zen Coding 的原做者進行開發等。 Emmet 嚴格意義上來講，並非一款軟件或者工具，它是一款編輯器插件，必需要基於某個編輯器使用。目前它支持以下編輯器：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (能夠經過 「Install Mixin」 對話框安裝)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

在上面列表點擊你目前使用的編輯器，就能夠得到對應的插件文件，安裝以後就可使用 Emmet 的相關功能了。因爲 Sublime text 2 是目前最好最強大的前端開發代碼編輯器，因此本文就以 Sublime text 2 爲例，講解 Emmet 的安裝、基礎語法。

在 Sublime text 2 中安裝 Emmet

Sbulime text 2 安裝插件確定要經過 Package Control 這個插件了，若是你尚未安裝這個插件，抓緊先去安裝一下吧。安裝完成以後，咱們摁下「shift + ctrl + p」呼出面板，輸入「pci」便可鎖定「Package Control：Install Package」這個功能，回車以後就能夠看到一個列表，咱們繼續輸入「emmet」便可找到這個插件，回車以後等待一會就安裝完成了。

 

Visual Studio中的 Emmet 

在visual studio 中的插件管理中搜索Web Essentials這樣一個插件，直接安裝就好了。

開始使用 Emmet

Emmet 能夠快速的編寫 HTML 和 CSS 以及實現其餘的功能。它根據當前文件的「語言」來判斷要使用 HTML 語法仍是 CSS 語法來解析。例如當前文件的後綴爲 .html 那 Sublime text 2 就會用 HTML 的方式來解析高亮這個文件，Emmet 也會根據 HTML 的語法把你輸入的指令編譯成 HTML 結構。若是是在一個 .c 的 C語言 文件中，你根據 Emmet 的語法編寫出來的指令，是不會被編譯的。

此外，在沒有後綴的文件中，你能夠摁下「shift + ctrl + p」呼出面板，輸入「seth」就能夠選擇當前文檔是使用 HTML 的模式仍是其餘編程語言的模式來解釋。下面就是一條 Emmet 的指令：

#page>div.logo+ul#navigation>li*5>a{Item $}

咱們把它複製到 Sublime text 2 中已經打開的 HTML 文件中，這時候敲擊一下 TAB 鍵，你就會發現這行指令變成了下面的 HTML 結構：

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

怎麼樣？很神奇吧，僅僅寫一行代碼，就能夠生成這麼一個複雜的 HTML 結構，並且還能夠聲稱對應的 class 、id 和內容。這行指令你如今可能還看不懂，下面會詳細講解語法，你如今只須要知道 Emmet 的工做流程：打開 HTML 或 CSS 文件->按語法編寫指令->摁下 TAB 鍵->生成！

Emmet 生成 HTML 結構基礎語法

生成 HTML 文檔初始結構 HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只須要輸入一個 「!」 就可