[VS Code] 自訂 Emmet 範本

今天朋友問到,要如何修改 VS Code 內 Emmet 的預設範本。一開始想說是沒有辦法修改預設的,應該也沒有辦法覆蓋吧,所以稍微在網路上找了一下,果然沒有找到相關的資料,但其實在官方文件內有提到自訂範本的事情,那就來看看怎麼修改吧

首先,先根據這裡的說明,將自訂 snippet.json 檔案所處的資料夾位置,設定到 settingsemmet.extensionsPath 的地方

1555301445272

我這裡先用 html 的部分做說明,CSS 依循一樣的規則,VS Code Emmet 內建所使用的 HTML Snippet 是使用這一份 html.json,假設我們想要修改 ! 所產生出來的預設 html 範本內容,我們只需要重新定義一個 doc 即可 (原始定義如下)

1
2
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body",
"!|html:5": "!!!+doc",

而自訂 snippet.json 的內容如下

1
2
3
4
5
6
7
8
{
"html": {
"snippets": {
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Documentttt}})+body"
}
}
}

我們只需要重新定義 doc 即可達到我們的需求,同樣的,如果想要擴充 Emmet 的功能,直接在此編寫即可

剩下的就看各位的想像力了

參考資料