vscode自定义模板，便捷开发

最新推荐文章于 2024-03-15 11:24:19 发布

RareHeng Lee

最新推荐文章于 2024-03-15 11:24:19 发布

阅读量270

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/weixin_39031806/article/details/105834945

版权

工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以创建vue的html模板为例

在html.json模板下编写

在 VS Code 中找到入口
1. 设置
2. 用户代码片段, 在输入框内输入 html,
3. 选择html.json/html，进入编辑
编写自定义模板, 保存
1. 基本的html框架
2. script中vue的路径配置
3. 基本的vue代码

模板如下

	"Html5-Vue": {
	"prefix": "vue",
	"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.6.10/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模板"
}

创建一个html文件, 输入vue 回车生成自定义模板.

温馨提示 :

“prefix” : 触发模板的关键字
模板都在"body":[ ]中编写
- 每行模板都用双引号
- 双引号中的双引号需要转义
  - $1 表示光标（多个光标可以使用Tab键跳转位置）
不能覆盖json文件自带的 { }

RareHeng Lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vscode自定义模板，便捷开发

以创建vue的html模板为例在html.json模板下编写在 VS Code 中找到入口设置用户代码片段, 在输入框内输入 html,选择html.json/html，进入编辑编写自定义模板, 保存基本的html框架script中vue的路径配置基本的vue代码模板如下 "Html5-Vue": { "prefix": "vue", "body"...
复制链接

扫一扫