原文：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，问题即可解决。
原文地址：https://www.cnblogs.com/haokan/p/12590790.html