開始創造自己的 HTML 環境

VS Code snippet 自訂 HTML 環境_01

以輸入 !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 檔案

VS Code snippet 自訂 HTML 環境_02

步驟三

把上方準備好的程式碼貼入 Snippet Generator ,把產出後的程式碼複製貼到 html.json
( 記得填 "prefix" 屬性 ) 儲存。重新開啟 VS Code 的 html 文件輸入剛剛填的 "prefix" 屬性值就會出現囉 !

  • 假設我想要輸入 !test 的 emmet ,HTML 就會出現預設的程式碼。就在貼入 html.json 後, "prefix" 後方輸入 !test
"prefix":"!test",
  • 關閉 VS Code 重啟後,於 html 文件中輸入 emmet → !test 就會出現囉 !

VS Code snippet 自訂 HTML 環境_03

// 這邊是先於 html 中打好程式碼再貼到 Snippet Generator 上 ▲

VS Code snippet 自訂 HTML 環境_04

// Snippet Generator 產出的程式碼貼到步驟二的 html.json 中。 ▲

建立 Snippet 的工具, Snippet Generator

Snippet Generator

把要建立的程式語言程式碼貼到 Snippet Generator 內,會自動轉成適當的格式,再貼入上方步驟二即可。

參考文章

最後修改日期: 9 月 2, 2020

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。