VScode自定义模板的使用

￡神魔★判官ぃ 2023-02-23 07:48 2阅读 0赞

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

1.  首先找到用户代码段  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70]
2.  搜索html.json文件  
    ![在这里插入图片描述][20200705222157516.png]
3.  然后写自己熟习的代码模板

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70 1]

**> 定义自己的模板**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70 2]  
详细模板

{ 
    "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",
    		 "\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的模板" // 模板的描述
    	 }
    }

\*\* 解释：\*\*

> VUE template 这个只是一个名字而已，并没什么特别，可以起aa，bb，cc都是没有问题的

> **"prefix": “vh”**：这是快捷键的名字，输入vh就会出来模板，就像直接输入 **‘’!‘’** 出来html的模板一样

> **"body": \[** 这里就是模板的定义了，就是一个数组，照样子填就好了  
> \\t =>tab \\n => 换行 \\ 转义符

> “description”: “VUE的模板” 模板的描述

基本就是这样使用的，也就是平时写的数组和转义符

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070522211142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw==,size_16,color_FFFFFF,t_70
[20200705222157516.png]: https://img-blog.csdnimg.cn/20200705222157516.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200705222309491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200705222443818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw==,size_16,color_FFFFFF,t_70