今天演來說說一個幾乎是必備的工具--Emmet。嚴格來說比較像是編輯器外加的外掛程式，讓在寫程式碼時，能夠以較短的內容展開成需要的程式碼內容。不單單只有emmet，這類型的工具非常的多，但是emmet可真是非常強大且有用，甚至還有獨立的維基百科頁面。
現今Emmet已經能用於多個編輯器裏面，包含notepad++、Emacs、Vim、Atom、VSCode不等，其中Atom和VSCode是後起之秀。不過在我一開始使用Emmet時，還不叫這個名字，並用於Nodepad++之中，而原名是Zen coding，是一個極速編輯HTML、CSS的外掛程式。
舉幾個常見的簡單例子：
要生成HTML5的基本架構，使要寫html:5，並生成就會得到下面的程式碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body></body>
</html>
想要生成清單？沒問題：ul>li*10會得到：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ID、Class？小事：div#a_id+div.a_class
<div id="a_id"></div>
<div class="a_class"></div>
更多使用方式可以參考這裏。
iThome鐵人賽
看影片追技術