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