vscode中內建了Emmet的擴充套件，這讓我們在寫網頁程式碼時方便了很多，但是有時我們也需要自定義一些Emmet的程式碼片段來實現一些特殊程式碼的生成，比如：自動匯入一些來自CDN的js或css樣式（Bootstrap、jQuery等）檔案。

那麼在vscode中如何來新增Emmet的自定義snippets呢？

首先我們需要建立一個snippets.json的檔案，在該檔案中輸入以下程式碼

{
    "html": {
        "snippets": {
            "meta:vp": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\" />",
            "meta:compat": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />",
            "meta:renderer": "<meta name=\"renderer\" content=\"webkit\" />",
            "meta:author": "<meta name=\"author\" content=\"abc\" />",
            "meta:key": "<meta name=\"keywords\" content=\"keywords1,keywords2\" />",
            "meta:desc": "<meta name=\"description\" content=\"description\" />",
            "link:favicon": "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\" />",
            "meta5": "meta:compat+meta:vp",
            "css:bs": "link[href=http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css]+link[href=http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap-theme.min.css]",
            "jq1": "script[src=http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js]",
            "jq2": "script[src=http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js]",
            "js:bs": "script[src=http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js]"
        }
    },

    "css": {
        "snippets": {
            "cb": "color: black",
            "bsd": "border: 1px solid ${1:red}",
            "ls": "list-style: ${1}"
        }
    }
}
 

然後，在vscode中配置Emmet: Extensions Path（這是指向包含 Emmet 配置檔案與程式碼片段的資料夾路徑）。輸入你剛才所建立snippets.json檔案所在的資料夾路徑。重啟vscode後就可以使用自己配置好的程式碼片段了。

在配置檔案裡"html"是針對html檔案設定的程式碼片段，"css"是針對css檔案設定的程式碼片段。如果你想在其他Emmet支援的檔案中也使用自定義的程式碼片段，可以在配置檔案後面繼續新增配置程式碼比如xml

	"xml": {
		"snippets": {
			"x": "<xml version=1.0></xml>"
		}
 

snippets.json配置檔案每次修改後，都需要重啟vscode，新的程式碼片段才能夠使用。