# iT 邦幫忙鐵人賽 DAY 18~21 HTML 神器 - Emmet

在我以前使用 Sublime Text 的時代,有在寫網頁的人必裝的擴充功能就是 Emmet 的前身 Zen Coding (好像不小心洩漏了自己的年齡…),它能加快並縮短開發者在編寫 HTML 及 CSS 的時間。在換到 VS Code 以後,Emmet 這個擴充功能更是直接內建了!看完這幾天的教學文章,相信你就知道它到底有多神啦!

# 如何啟用 Emmet?

首先你先用 VS Code 隨便開啟一個空的 HTML 檔案,或是直接開一個新檔案,然後在右下角選成 HTML 語言:

# 自動打出 HTML 的基礎程式碼

一開始我們可以輸入 然後再輸入 來自動完成基礎的 HTML 內容:

按下 Tab 以後,你就可以看到它已經幫你打好了基礎的 HTML5 的程式碼:

在自動補完 HTML 程式碼以後,Emmet 會自動幫你選取第一個預先設定欄位(上圖中藍色底色的已選取文字),有灰色底的地方代表你接下來可以繼續按 跳過去的預先設定欄位,然後最後一個 Tab 會幫你跳到 body 的標籤內,讓你可以快速開始打 body 的內容。

備註:! 預設是會幫你自動完成 HTML5 的程式碼,如果這個不是你要的,還有以下的一些其他版本的 HTML 可以使用喔!一樣都是打完關鍵字以後按下 Tab 來自動補全即可。

  • html:xml
  • html:4t
  • html:4s
  • html:xt
  • html:xs
  • html:xxs

# 透過 HTML 標籤來自動補全

首先,先確認我們的游標在 body 內:

接著,輸入 h1 以後按下 鍵:

你可以注意到,如果你打的是 HTML 裡面有的標籤,它會自動幫你打上起始標籤 <h1> 與結束標籤 </h1> ,並且幫你把游標停留在中間,之後你就可以繼續補完 h1 標籤裡面的文字。

接下來我們來新增一張圖片,將游標移動到此處:

然後輸入 img 之後按下 鍵:

你可以注意到如果你輸入的是 HTML 內的特殊標籤,它會將這個標籤常用的屬性順便幫你打出來,並且游標會停在 src="" 裡面來等你輸入圖片網址。

link 標籤也類似 img,會自動打上標籤的常用屬性,並且游標會停在 href="" 中:

# 加上 id、class 與屬性

Emmet 支援使用 css selector 來讓快速幫你打上對應的程式碼:

你可以注意到 . 變成 class="" 的內容,# 變成 id="" 裡面的內容,然後 [] 內的文字會直接變成對應的額外屬性,然後在這個範例內我省略了 HTML 的標籤,當省略的時候,Emmet 自動會幫你填 div

# 子元素

你可以使用 CSS Selector 中的 > 符號來快速產生子元素,如 ul>li

如果你想要一次產生很多層也沒有問題!

# 一次產生多個

你可以使用 * 來一次產生多個,如 ul>li*5

實際上,像這樣打也一樣可以使用喔!

# 群組

你可以使用 () 來對一整個元素做操作,如 table>(tr>td*3)*3

# 標籤的特殊變種

Emmet 有專門針對一些標籤設計特殊的變種,例如 input 有很多種不一樣的輸入框,這時候可以用 : 來指定要哪一種特殊的變種:

  • input:hidden
  • input:text
  • input:password
  • input:tel
  • input:number
  • input:checkbox
  • input:radio
  • input:file
  • input:submit
  • input:button
  • input:reset
  • 還有很多沒有列出來的就直接去查 官方小抄 吧!

# 相鄰元素

你可以使用 + 來產生相鄰的元素,如 label+input:text

# 自動編號

你可以使用 $ 來幫你自動編號,如 img#icon-$*5

# 填充文字

你可以使用 lorem 來產生亂數英文單字來填充你的網頁:

你還可以使用 lorem200 ,後面的數字代表你要多少個英文單字:

# 更多可用的關鍵字

如果你想要知道更多可用的 Emmet 關鍵字,建議你去看 Emmet 的官方小抄