Visual Studio Code修改HTML Snippets插件中默认模板内容
最近在熟悉用VSC做前端开发编辑器,发现snippets这个功能很好用,就是自动帮你输入HTML标签,安装HTML Snippets插件(0.1.0)后,直接在代码里面输入html5然后敲回车就会自动帮你把一个HTML5标准标签模板给填充好,但是有一个小问题就是,自动填充的效果是这样的:
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
head>
<body>
body>
html>这里lang=”en”,我想修改默认填充成lang=”zh-CN”,小折腾了一下,找到了这个插件的配置文件位于
C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.json打开这个文件,找到定义html5映射的部分,修改如下,重启一下VSC,再输入html5就变成想要的效果了
"html5": {
"prefix": "html5",
"body": [
"",
"<html lang=\"$1zh-CN\">", ~~这里原来是en~~
"\t<head>",
"\t\t<title>$2title>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">",
"\thead>",
"\t<body>",
"\t$4",
"\tbody>",
"html>"
],
"description": "HTML - Defines a template for a html5 document",
"scope": "text.html"
},补充一下
也可以在文件-首选项-用户自定义代码段,找到HTML后,在html.json配置文件里面写上自己常用的代码段,例如下面这个是我修改的包含Vue.js引用的HTML5代码模板:
{
/*
// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
*/
"Vue": {
"prefix": "vue",
"body": [
"",
"",
"\t",
"\t\t<span class="hljs-variable">$1</span> ",
"\t\t",
"\t\t",
"\t\t",
"\t",
"\t",
"\t$2",
"\t",
""
],
"description": "vue - Defines a template for a vue & html5 document"
}
}