VScode自定义模板的使用

最新推荐文章于 2025-10-28 02:52:36 发布

原创最新推荐文章于 2025-10-28 02:52:36 发布 · 置顶 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#visual studio code

提升开发效率，利用VScode创建个性化代码模板。通过查找html.json文件，定义自己的模板，设置快捷键如'vh'，触发VUE模板。在'body'中配置模板具体内容，包括缩进和换行，同时附带描述信息。

为了提高效率，使用快捷键就能生成模板代码是不是美滋滋！直接上马

首先找到用户代码段
搜索html.json文件
然后写自己熟习的代码模板

一般没有定义模板的，刚开始是什么都没有的
也可以将这些都删了

在这里插入图片描述

> 定义自己的模板
在这里插入图片描述
详细模板

{
"VUE template": {
        "prefix": "vh", // 对应的是使用这个模板的快捷键
        "body": [
         "<!DOCTYPE html>",
         "<html lang=\"en\">",
         "<head>",
         "\t<meta charset=\"UTF-8\">",
         "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
         "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		 "\t<title>Document</title>",
		 "\t <!-- 路径要写对 -->",
         "\t<script src=\"./lib/vue-2.4.0.js\"></script>",     
         "</head>\n",
		 "<body>",
		 "\t<!-- vue 实例控制的这个元素区域  就是  v区域 -->",
		 "\t<div id =\"app\"> <h1>{{ msg }}</h1> </div>\n",
         "</body>\n",
         "<script>",
         "\t  // 创建一个vue实例这里就是 vm调度者",
         "\t var vm = new Vue({",
         "\t\tel: '#app', //这里就是控制区域",
		 "\t\tdata : {   //数据域",
         "\t\tmsg : '我是网页VUE'",
		 "\t\t },  ", 
		 "\t\//这里定义的都是方法",
         "\t\tmethods: {}",
         "\t });",
         "\t</script>",
         "</html>"
        ],
        "description": "VUE的模板" // 模板的描述
	 }
}