2020-12-01

程序员文章站 2022-07-12 20:31:44

...

【终极方法】在Vscode中用户创建自定义代码模板

在vscode中怎样创建模板，网上一大堆，这里推荐一个能解决80%问题的一个比较详细的教程方法（链接放在最后），毕竟授人以鱼不如授人以渔授人渔。若你还解决不了，这里或许能帮你解决。

【方法如下】

方法1

1.在Vscode中找到设置 -> 用户代码片段，在输入框内输入vue，并点击第一个vue.json：

2.在vue.json中编辑我们的模板代码【如下】

"Vuecode": {
		"prefix": "vue",
		"body": [
			"<!DOCTYPE html>",
			"<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=\"./vue-2.5.17.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": "my vue model"
	}

【申明】

"prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue，这个可以自己随便更改，如vu等，到是会根据此关键字生成该模板片段。
模板都是在"body":[]中编写的，切记，复制的代码需放置原本的{}中，切记。
"description":""双引号包括的是对模板描述，只是补充说明，没实际作用。
每一行模板代码都要用双引号""来包括，否则报错（表现为有波浪线出现），注意代码中间也出现了双引号的，需要用转义字符\转义。（
\n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。）
以下是没有加双引号和放置{}外报错截图

若按上方法还未成功，那可以试试以下方法

1.在Vscode中找到设置 -> 用户代码片段->新建全局代码片段。

2020-12-01

2.在全局代码片段文件编辑模板段，接下来的方法如上方法一样，就不啰嗦了。

3.最后一步，测试结果，输入vue按Tab键。检测结束，（记得更改后保存，再退出vscode重进）

2020-12-01

方法1详情请LL:https://blog.csdn.net/s_y_w123/article/details/86481509