開始創造自己的 HTML 環境
以輸入 !test 的 emmet 新增 HTML 內的下方程式碼為例 :
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="FB的標題" />
<meta property="og:description" content="FB的描述">
<meta property="og:type" content="website" />
<meta property="og:url" content="FB上的網址" />
<meta property="og:image" content="FB的圖片" />
<link rel="stylesheet" href="">
<title>測試測試 :)</title>
</head>
<body>
</body>
</html>步驟一
開啟 VS Code 檔案 / 喜好設定 / 使用者程式碼片段
步驟二
於框內輸入 html ，點選 html.json ，就會開啟 html.json 檔案
步驟三
把上方準備好的程式碼貼入 Snippet Generator ，把產出後的程式碼複製貼到 html.json
( 記得填 "prefix" 屬性 ) 儲存。重新開啟 VS Code 的 html 文件輸入剛剛填的 "prefix" 屬性值就會出現囉 !
- 假設我想要輸入 !test 的 emmet ，HTML 就會出現預設的程式碼。就在貼入 html.json 後， "prefix" 後方輸入 !test
"prefix":"!test",- 關閉 VS Code 重啟後，於 html 文件中輸入 emmet → !test 就會出現囉 !
// 這邊是先於 html 中打好程式碼再貼到 Snippet Generator 上 ▲
// Snippet Generator 產出的程式碼貼到步驟二的 html.json 中。 ▲
建立 Snippet 的工具， Snippet Generator
把要建立的程式語言程式碼貼到 Snippet Generator 內，會自動轉成適當的格式，再貼入上方步驟二即可。