1、打开VScode
2、打开“文件”→“首选项”→“用户片段”
3、在弹出的页面中点击“新代码片段”
4、在文本框内输入名称，例如“vue-template”，输入完成，按下“Enter”键
5、弹出如下页面，{}里面全部是英文注释
6、在英文注释后，{}里面，输入以下代码，保存即可
"vue_learn_template": {
"prefix": "vl", //键入快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<title>Document</title>",
"</head>\n",
"<body>",
"\t<div id=\"app\">",
"\t\t{{message}}",
"\t</div>",
"\t<script src=\"../js/vue.js\"></script>",
"\t<script>",
"\t\tconst app = new Vue({",
"\t\t\tel: '#app',",
"\t\t\tdata: {",
"\t\t\t\tmessage: '你好'",
"\t\t\t}",
"\t\t})",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "vue学习模板"
}其中，\t 和 \n都是转义字符，\t 的意思是横向跳到下一制表符位置，相当于按一次 Tab键；
\n 的意思是回车换行。
7、测试
新建一个空白的HTML文件，输入“vl”后，键入“Tab键”，空白的html即可产生如下vue的模板代码片段：
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
