DAY 18 HTML 神器 - Emmet (Part 1)

在我以前使用 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

明天待續…