VS Code中自定义Emmet代码片段

原文：https://blog.csdn.net/zjthorse/article/details/83048869

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">",
            "meta:5": "meta:compat+meta:vp",
            "link:favicon": "<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">",
            "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

snippets.json配置文件每次修改后，都需要重启vscode，新的代码片段才能够使用。

备注：上述配置文件在vscode中使用"!"或"html:5"等缩写生成页面基本结构时，会在head区域多出一段<div content="ie=edge">的代码来，产生问题的原因是vscode内置了meta:compat和meta:edge两个缩写，可以重新自定义这两个缩写，要不就是把代码中meta:compat修改为meta:edge，问题即可解决。