編輯嚴選【自學程式】什麼是Emmet？加速前端開發必備，常用15種HTML Emmet語法教學
編輯嚴選
2021/07/03閱讀時間約 9 分鐘
初學程式的時候，可能會有幾個問題讓你的開發速度低落，腦袋動得很快，但是手卻跟不上想法。
舉例來說： 瀏覽器的DevTool一直報錯，畫面的邏輯出錯，或是畫面根本出不來，但你卻不知道問題出在哪。
有可能是出現Typo，把HTML標籤的名稱打錯，在CSS檔案中把font-size打成font-style。
甚至也有可能是HTML標籤間的結構過於巢狀、寫得不好，將內容塞錯區塊，導致畫面內容呈現錯誤。
又或者是，你本身的英打能力很差，coding的速度世界慢，
今天要跟大家介紹一個開發上非常實用的小工具，可以解決開發上速度慢、容易有Typo的狀況，它叫做：Emmet。
根據中文維基百科，Emmet是由一群國外的開發者，透過縮寫的方式，讓編碼的過程更加迅速，同時用來解決編譯器常出現的打字錯誤。
現在許多的前端編譯器都有支援Emmet的外掛，像是Visual Studio、Atom，或是大家常用的線上編譯器Codepen也有支援，不需要額外安裝套件。
接下來我們就來看看Emmet語法要怎麼使用，讓我們在開發前端時更加迅速吧！
Emmet基礎語法介紹
VS code中，我們可以透過輸入Emmet語法加上Enter，或者在使用Codepen時輸入Emmet語法加上Tab鍵，就可以輕鬆創造出各式各樣的效果。
基本上我們只要打上一個HTML標籤的名稱（不需要加上<>符號）後按下Enter鍵，完整的一組標籤（包含起始標籤及結尾標籤）就會直接出現了。
舉例來說，我們只要在HTML文檔中，打入div+enter，一組完整的標籤<div></div>就會出現了。
這也是我們平常在開發上就會使用到的技巧，只是你可能不知道這其實是額外的套件功能。
但使用Emmet語法時需要注意兩件事：第一，Emmet語法或是標籤之間不能有空格，否則就會不合法；第二，Emmet語法只能能是「半形」的符號、數字及英文字母，使用全形的符號也是不合法的。
我們再來看看其他常用的Emmet語法：
「!」：
驚嘆號加上Enter，可以直接創造出完整的HTML文件範本，不需要自己額外設定mata或是其他初始的標籤。
「lorem」：
在開發時，我們很常會出現需要使用假字來看畫面呈現的效果，「lorem+enter」可以快速產出一段英文假內容，如果不想要出現一整段，可以在後面加上你想要的字數+enter，就可以產出該字數的假字，舉例來說，lorem5+enter，就只會出現5個假字，而不是一整段。
「link:css」 ：
產生出CSS的連結如：<link rel="stylesheet" href="style.css">，就不用額外自己設定 href="style.css"，但我個人還是習慣使用link+enter，因為通常css檔案的路徑不一定長得跟預設值一樣。
「a:link」：
如果我們只使用a+enter，會產生出沒有href屬性的a標籤，但是透過「a:link」，我們可以快速產生出<a href="https://"></a>的結構。
「btn」：
button元素的縮寫，可以快速產生出一組<button></button>元素。
但其他問題出現了，如果我們要快速加入class名稱或是id名稱呢？或是要如何快速加入標籤屬性？或是快速創造出巢狀的結構？
我們接著來看看更進階的Emmet語法整理。
Emmet進階語法介紹
「.」：
在元素標籤中使用「.」加上類別名稱，可以快速生成一個擁有該class名稱的元素，舉例來說，ul.list的Emmet語法就會產生<ul class=”list”></ul>的結構。
「#」：
在元素標籤中使用「#」加上類別名稱，可以快速生成一個擁有該id名稱的元素，舉例來說，ul#list的Emmet語法就會產生<ul id=”list”></ul>的結構。
「>」：
此語法可以在另外一個標籤內生成其他元素，舉例來說，如果我使用ul>li的Emmet語法，我可以獲得以下結構：
那如果我想要在li元素中，多加一個a標籤呢？這時候我們可以寫成ul>li>a，就可以獲得以下結構：
「+」：
此語法可以連結不同的標籤，並一次性創造出「同階層」的大量元素，舉例來說，如果我使用div+ul>li就可以獲得以下結構：
「^」：
攀升符號可以讓接在後頭的元素，增加至「上」一個階層，舉例來說：div>ul>li^ul這樣的結構，並不會讓最後一個ul元素直接生成在li裡，而是生成在第一個出現的ul中，與前面的li處在同一個階層。
這時候你可能會覺得很疑惑，那為什麼不直接使用+號生成就好？這個問題的點在於，萬一我想要在li中另外生成其他元素怎麼辦？我們來看看這個範例：
在這個範例中，我們透過Emmet語法div>ul>li>a^ul建立了巢狀結構，我們可以在li中額外加入一個a元素，如果我們使用div>ul>li>a+ul，就會讓li元素中額外生成了a元素與ul元素，而不是讓新的ul生成在與li同一階層。
「*」：
此語法的含義與我們常用的乘號意義相同，可以一次性創造多組同樣的元素，舉例來說：ul.list>li.item*5，可以快速創造出擁有list class的ul元素，在這個ul元素中又分別有五個帶有item class的li元素：
「[ ]」：
在先前的幾種語法，我們並沒有提到要如何透過Emmet語法，創造元素的屬性，而透過在中括號填入屬性名稱及值，就可以簡單創造出帶有特定屬性的HTML元素，舉例來說：ul[data-id=000]，可以創造出帶有data-id=“000”屬性的ul元素。
注意：在這裡的屬性值是不需要帶上雙引號，因為Emmet會自動幫你在屬性值上帶上雙引號。
「( )」：
很多時候我們為了要快速產生多層的HTML結構，可能會需要一次打一長串的Emmet語法，舉例來說：我現在要製作一個帶有class名稱及屬性的列表，這個列表當中也帶有10個擁有個別的a連結的li元素，這樣的結構要怎麼透過Emmet來產生呢？
最一開始我的答案是ul.list[data-type=”list”]>li.item>a[href=”#”]*10。
但你會發現沒有先後順序的結構編譯器是看不懂的，於是就有了小括號的出現。
「( )」符號可以發揮類似於「計算時的優先性」，將被括起來的程式先做運算，括號裡的運算完後，在進行「>」生成結構的排列。
我們現在可以把範例的程式碼改成ul.list[data-type=”list”]>(li.item>a[href=”#”])*10，就可以順利運行了：
「{ }」：
在Emmet語法中我們可以透過在大括號中加入文字，接在可以帶有文字的標籤後，就能產生出文字效果，舉例來說：a[href=#]{我是連結}的Emmet語法，就可以帶出<a href="#">我是連結</a>的效果來。
「$」：
在HTML中，有時候我們可能會需要產出「數列」，這時候使用錢字號，就可以幫我們產出從1開始的規律數列，舉例來說：a[href=#]{$}*10的Emmet語法，可以自動產出帶從1開始排序到10的連結出來， 錢字號的規律取決於有幾個元素帶有$的元素存在。
今天介紹了15種HTML Emmet的語法應用，當然實際在開發的時候，應用的情境及語法會有非常多種變化，如果沒有刻意練習、去熟悉Emmet的話，很容易就會產生階層生成不當，或是Emmet不能順利產出預期結構的狀況。
這裡想跟大家額外分享一個初學Emmet時，可以參考相關指令，並練習Emmet指令的一個小專案，此專案是由一位來自墨西哥的開發者@k3no，在Codepen打造的Emmet練習區，非常適合初學者在學習Emmet時，一邊參考範例一邊練習。
如果你在閱讀本篇文章時，不太能理解何謂屬性、元素的話，可以參考以下文章：
今天的文章到這邊，如果你有任何關於網頁開發的問題，歡迎你留言跟我討論！
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：[email protected]
381會員
91內容數
留言0
查看全部
