1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
網頁開發 網頁設計

[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼

2020/08/27

梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
  講到程式片段這功能,在Dreamweaver CS3時代就已加入了,但卻顯少人使用,其最主要的原因,不外乎就是Dreamweaver透過圖示的點撃,立即就可把一些常用的標籤語法,自動的插入到網頁中,如此一來自訂的需求就減少許多,但其實這是一個相當棒的功能,透過已建立好的程式片段,只要輸入片段程式碼的縮寫,立即就可產生相關的原始碼,是件相當方便的事。

而這功能已不是Dreamweaver的專利,就連Sublime Text與Visual Studio Code,也有此功能,先前已分享過Sublime Text程式片段的作法,接下來梅干要來分享,如何在Visual Studio Code自訂自己所需的程式片段吧!方法也很簡單,現在就一塊來看看囉!


Step1
首先開啟VS Code,接著選擇 「喜好設定 / 使用者程式碼片段」的選項。
梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
Step2
接著輸入HTML。
梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
Step3
這時會開啟html.json,而這個速碼的格式就是json,因此只需依照它的格式,進行填寫就可以了。
梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
Step4
當有多筆時,需在大括弧結束的地方加上逗號。
梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
Step5
當完成後,回到網頁編輯模式,這時只需輸入相關的關鍵字,下方立即就會顯示剛所建立的速碼名稱與說明。
梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼
Step6
再按下Enter後,隨即就會產生剛所設定的程式碼片段,是不是超方便又快速的呀!有在VS Code的朋友,也趕快學起來吧!
梅問題-[教學] Visual Studio Code 自訂常用程式片段,快速產生原始碼