VSCode添加自定义模板

VSCode添加自定义模板1.自定义模板概述在工作中写一些固定的内容，我们不希望重复去写，例如HTML模板内容我们希望能够自动创建，这个需求我们使用VSCode工具的自动以模板就可以实现。VSCode工具中定义模板是通过json文件实现，我们只要按照json格式在文件中编辑我们模板的内容保存后，就可以拿来使用了。2.创建html模板File–Preferences–User Snippets搜索h

Bruce小鬼

9060人浏览 · 2020-11-24 11:14:58

Bruce小鬼 · 2020-11-24 11:14:58 发布

VSCode添加自定义模板

1.自定义模板概述

在工作中写一些固定的内容，我们不希望重复去写，例如HTML模板内容我们希望能够自动创建，这个需求我们使用VSCode工具的自动以模板就可以实现。
VSCode工具中定义模板是通过json文件实现，我们只要按照json格式在文件中编辑我们模板的内容保存后，就可以拿来使用了。

2.创建html模板

File–Preferences–User Snippets

在这里插入图片描述

搜索html模板

在这里插入图片描述

定义模板格式说明

{
	// 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"
  // }
  
  /* ------------上面内容都是VSCode默认内容可以删除----------- */
  /* ------------下面是我们定义的html模板内容----------- */
  "html template": {
    "prefix": "h", // 使用模板的快捷键
    "body": [  //模板的内容都定义在body中
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
        "\t<meta charset=\"UTF-8\">",
        "\t<title>Title</title>",
      "</head>",
      "<body>",
      "\t $0",  //$0 鼠标停留的位置
      "</body>",
      "</html>"
    ],
    "description": "html 简单模板"  //模板的描述
  }
}

在html文件中输入快捷键查看模板内容

在这里插入图片描述

模板内容展示效果

在这里插入图片描述

3.创建vue模板

创建vue模板和html模板的方式是一样的，只不过我们vue模板的内容要卸载vue.json文件中。

编辑vue.json模板内容

{
	// Place your snippets for vue 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"
  // }

  "Print to console": {
    "prefix": "vue",
    "body": [
      "<script src=\"../js/vue.js\"></script>",
      "<script>",
        "const app = new Vue({",
        "el: '#app',",
        "data: {\n",
          "\t",
          "}",
        "})",
      "</script>",
    ],
    "description": "Log output to console"
    }
}