原文：https://blog.csdn.net/zjthorse/article/details/83048869
vscode中内置了Emmet的扩展，这让我们在写网页代码时方便了很多，但是有时我们也需要自定义一些Emmet的代码片段来实现一些特殊代码的生成，比如：自动导入一些来自CDN的js或css样式（Bootstrap、jQuery等）文件。
那么在vscode中如何来添加Emmet的自定义snippets呢？
首先我们需要创建一个snippets.json的文件，在该文件中输入以下代码
1 { 2 "html": { 3 "snippets": { 4 "meta:vp": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\">", 5 "meta:compat": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">", 6 "meta:renderer": "<meta name=\"renderer\" content=\"webkit\">", 7 "meta:author": "<meta name=\"author\" content=\"abc\" />", 8 "meta:key": "<meta name=\"keywords\" content=\"keywords1,keywords2\">", 9 "meta:desc": "<meta name=\"description\" content=\"description\">", 10 "meta:5": "meta:compat+meta:vp", 11 "link:favicon": "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\">", 12 "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]", 13 "jq1": "script[src=http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js]", 14 "jq2": "script[src=http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js]", 15 "js:bs": "script[src=http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js]" 16 } 17 }, 18 19 "css": { 20 "snippets": { 21 "cb": "color: black", 22 "bsd": "border: 1px solid ${1:red}", 23 "ls": "list-style: ${1}" 24 } 25 } 26 }
然后，在vscode中配置Emmet: Extensions Path（这是指向包含 Emmet 配置文件与代码片段的文件夹路径）。输入你刚才所建立snippets.json文件所在的文件夹路径。重启vscode后就可以使用自己配置好的代码片段了。
在配置文件里"html"是针对html文件设置的代码片段，"css"是针对css文件设置的代码片段。如果你想在其他Emmet支持的文件中也使用自定义的代码片段，可以在配置文件后面继续添加配置代码比如xml
snippets.json配置文件每次修改后，都需要重启vscode，新的代码片段才能够使用。
备注：上述配置文件在vscode中使用"!"或"html:5"等缩写生成页面基本结构时，会在head区域多出一段<div content="ie=edge">的代码来，产生问题的原因是vscode内置了meta:compat和meta:edge两个缩写，可以重新自定义这两个缩写，要不就是把代码中meta:compat修改为meta:edge，问题即可解决。