用vscode创建自定义模板

最新推荐文章于 2024-05-31 18:23:09 发布

weixin_44592912

最新推荐文章于 2024-05-31 18:23:09 发布

阅读量5.9k

点赞数 5

分类专栏： vscode 文章标签： vscode vue

本文链接：https://blog.csdn.net/weixin_44592912/article/details/97641835

版权

vscode 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

用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的自定义模板，其他自定义模板也可仿造此方法创建

weixin_44592912

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
用vscode创建自定义模板

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

扫一扫