iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
1

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

明天待續…


上一篇
DAY 17 擴充功能簡介 (Part 2)
下一篇
DAY 19 HTML 神器 - Emmet (Part 2)
系列文
精通 Visual Studio Code31

尚未有邦友留言

立即登入留言