用vscode创建自定义模板

用vscode创建自定义模板在vscode中快速创建自定义的模板，可提高代码编写的效率，减少一些繁杂的输入，在此以创建vue 模板为例，介绍在vscode中创建自定义模板。该vue模板是在html页面中设计的首先，在vscode中找到设置->用户代码自定义输入html，选择html.json点击进入编辑接下来就是编写我们的模板prefix 为前缀属性，就是当我们在自...

weixin_44592912

6041人浏览 · 2019-07-29 14:43:14

weixin_44592912 · 2019-07-29 14:43:14 发布

用vscode创建自定义模板

在vscode中快速创建自定义的模板，可提高代码编写的效率，减少一些繁杂的输入，在此以创建vue 模板为例，介绍在vscode中创建自定义模板。

该vue模板是在html页面中设计的

首先，在vscode中找到设置->用户代码自定义
在这里插入图片描述

输入html，选择html.json
在这里插入图片描述
点击进入编辑

接下来就是编写我们的模板

prefix 为前缀属性，就是当我们在自己的代码中，输入该prefix的属性值，按enter就会输出该模板，如当我在输入 vue ，按enter之后就会打印出该vue 模板；
在body 部分定义自己的模板；
一双引号代表一行，当模板中有双引号时，需转义

{
	// 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"
	// }
	"creat a vue template": {
		"prefix": "vue",
		"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<script src=\"./lib/vue.js\"></script>",
			"</head>",
			"<body>",
				"\t<div id=\"app\">",
				"\t",
				"\t</div>",
				"\t",
				"\t<script>",
					"\t\tvar vm=new Vue({",
						"\t\t\tel:'#app'",
					"\t\t})",
				"\t</script>",
			"</body>",
			"</html>",
		],
		"description": "Log output to console"
	}
}

使用
在这里插入图片描述
按enter

在此就完成在vscode中创建一个vue的自定义模板，其他自定义模板也可仿造此方法创建

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^