码迷,mamicode.com
首页 > 其他好文 > 详细

VS Code中自定义Emmet代码片段

时间:2020-03-29 11:14:05      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:col   html   css   json   一段   des   imu   自己   ini   

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

VS Code中自定义Emmet代码片段

标签:col   html   css   json   一段   des   imu   自己   ini   

原文地址:https://www.cnblogs.com/haokan/p/12590790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!