前端工程師多少應該了解一下什麼是Emmet? 如何透過Emmet工具，減少重複的事情。
前端工程師應該要認識的開發工具 Emmet
身為一個前端工程師，我們在開發網站不免需要使用大量重複的HTML，若是剛轉職的新手或許可以趁機多加練習，熟能生巧。 但是當前端開發越來越熟練時，在面對重複的HTML時，就會顯得有些浪費時間。因此，這個工具就誕生了。 那就是今天的主角 Emmet。
Emmet是什麼?
Emmet 是一個網頁開發工具，主要是用來提升HTML及CSS的開發效率。 其實在Visual Studio Code及Codepen它們已經預先安裝好，讓開發者可以直接使用。 以下就讓我們來介紹Emmet常用的幾種功能吧。
Emmet常用的功能
在介紹常用的幾個功能之前，先稍微說明一下，若你的開發環境有安裝Emmet，都可以使用特定標籤或符號搭配 Tab 去觸發Emmet。
比如，我可以輸入div + Tab快速產生<div></div>。
若沒有的話，可能要檢查一下Emmet是否成功安裝。
1. 透過 ! 建立HTML基本格式
有看過前幾篇文章的朋友都知道HTML的基本格式為以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
但是每次開發都要打一遍想必非常麻煩，甚至到最後都去複製之前的專案，再把多餘的部分砍掉。
為了解決這個問題，你可以使用 ! + Tab Emmet就可以自動產生此HTML基本格式。
2. 使用 * 建立多個相同的標籤
當今天想要建立多個<div>標籤時，我們得一個一個慢慢打或是複製貼上。
舉個例子，若想產生以下內容：
<div></div>
<div></div>
<div></div>
可以使用<div> * 3 + Tab，來快速完成此需求。
3. 使用 > 來建立子標籤
當我們想要建立列表時，若是今天有很多個列表就得花很多時間。 舉個例子，今天想要建立一個購物清單。
<ui>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ui>
可以使用 ul > li * 5 + Tab 來快速建立清單。
這邊使用到 * 的技巧，我們可以透過混搭來快速呈現自己想要的效果。
4. 使用 + 建立多個不同的標籤
今天若我想產生以下內容：
<p></p>
<a href=""></a>
<p></p>
<a href=""></a>
可以使用p + a + p + a + Tab快速建立此內容。
5. 透過Emmet快速產生標籤及屬性
今天若要產生三個區塊元素來區分 header、cotent、footer三個段落。我們可能會使用<div>搭配三個class來做設定。
因此，我可以直接透過div.header + div.content + div.footer + Tab來產生以下範例。
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
若要將class換成id，只需要將 .更改為#，div#header + div#content + div#footer + Tab即可。
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
今天若你想要使用其他的屬性，比如Day5課提到的超連結標籤<a>。
你可能需要寫以下內容：
<a href="https://bradyyang-tw.github.io/frontend/Day5/"></a>
那麼你可以透過a[href="https://bradyyang-tw.github.io/frontend/Day5/"] + Tab來快速產生上述內容。
大家如果對class、id、屬性還沒那麼熟，沒有關係。下一篇開始，我們會介紹CSS，到時候就會提到此用法。
6. 使用Lorem 快速產生內容
今天在設計網站時，難免需要塞一些內容來看看網站的效果。此時，你就可以使用Lorem + 文字數量 + Tab。
比如，我可以透過Lorem50 + Tab產生50個字的內容。
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Id ea commodi tempora deleniti ipsa ducimus ratione eum laudantium aspernatur delectus,
repellendus nihil sint. Animi provident sunt, perferendis harum iusto unde! Ut veniam sapiente fuga aut
facilis minus quaerat itaque amet inventore! Fugiat dignissimos numquam blanditiis, ducimus tempore iste
quo mollitia?</p>
總結
以上是我自己比較常使用的Emmet用法，Emmet還有很多其他的用法，它們也提供了Cheat Sheet 供大家快速查找。 不過還是提醒大家，工具雖然方便，但是自己也要理解標籤的用法。自己常練習讓身體產生肌肉記憶，也並非是壞事。