VS Code中自定义Emmet代码片段

Posted 2021-03-03 haokan

原文：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，问题即可解决。