VS Code中快速创建自定义代码模板的方法

最新推荐文章于 2024-05-15 08:43:05 发布

Akimoto Hiroshi

最新推荐文章于 2024-05-15 08:43:05 发布

阅读量934

点赞数 1

分类专栏：基础操作文章标签： vue vscode

本文链接：https://blog.csdn.net/dyw3390199/article/details/111416312

版权

基础操作专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我们就以创建vue自定义模板为例子来演示一下
在这里插入图片描述
输入html回车

把准备好的模板复制到body中：

	"prefix": "vh",
	"body": [
		"<!DOCTYPE html>",
		"<html lang=\"zh-CN\">\n",
		"<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-2.5.17/vue.js\"></script>",
		"</head>\n",
		"<body>",
		"\t<div id=\"app\">$1</div>\n",
		"\t<script>",
		"\t\tvar vm = new Vue({",
		"\t\t\tel: '#app',",
		"\t\t\tdata: {},",
		"\t\t\tmethods: {}",
		"\t\t});",
		"\t</script>",
		"</body>\n",
		"</html>"
	],
	"description": "vue template shortcut"

保存以后是这样的效果：

在这里插入图片描述
prefix设置的就是智能感知快捷键，我们在这里比如就设置成vh
键名Html5-Vue就是这个模板的名字，在输入vh并感知以后会显示：

我们在test.html文件里里面输入vh，弹出来智能感知，就是我们刚才编写好的html5-vue模板，回车：
在这里插入图片描述
搞定！