vscode 自定义文件模版

最新推荐文章于 2024-05-06 15:31:50 发布

Mijac_

最新推荐文章于 2024-05-06 15:31:50 发布

阅读量539

点赞数

分类专栏：工具代码编辑器文章标签： visual studio code

本文链接：https://blog.csdn.net/Mijac_lan/article/details/115524815

版权

工具同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

代码编辑器

2 篇文章 0 订阅

订阅专栏

最近开始学习vue的一些课程总要写html相关的东西，虽然可以复制粘贴，但还是觉得麻烦找了一下可以使用vscode 的自定义模版的文件使用方法。我也写一个放这里做做笔记。

vscode自定义文件模版本例子以 html5 为例

在使用vscode开发的时候可以使用！来快速生成html的模版，那么我们要实现的效果就是如此。

设置>用户代码片段
在这里插入图片描述
搜索html 后回车或者直接写个名字后回车也行

写入.json 里的文件信息（直接写名字的.json 复制代码即可）

示列代码：

{
	"vue h5 template": {
		"prefix": "vtem",	// 对应的是使用这个模板的快捷键
		"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=\"../vue.js\"></script>",     
			"</head>\n",
			"<body>",
			"\t<div id =\"app\"> {{message}} </div>\n",
			"\t<script>",
			"\t var app = new Vue({",
			"\t\tel: '#app',",
			"\t\tdata: { message: 'hi' },",
			"\t\tmethods: {}",
			"\t });",
			"\t</script>",
			"</body>\n",
			"</html>"
		],
		"description": "H5 vue-template"	 // 模板的描述
	}
}

转义字符解释：

\t " \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
\t 的意思是横向跳到下一制表符位置等于 Tab键
" 的意思是双引号
\n 的意思是回车换行

这段代码贴到那个.json 文件里就行了

效果:
输入vtem 回车生成相对应的代码文件
在这里插入图片描述

博客地址：https://blog.csdn.net/mijac_lan

Mijac_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vscode 自定义文件模版

最近开始学习vue的一些课程总要写html相关的东西，虽然可以复制粘贴，但还是觉得麻烦找了一下可以使用vscode 的自定义模版的文件使用方法。我也写一个放这里做做笔记。vscode自定义文件模版本例子以 html5 为例在使用vscode开发的时候可以使用！来快速生成html的模版，那么我们要实现的效果就是如此。设置>用户代码片段搜索html 后回车或者直接写个名字后回车也行写入.json 里的文件信息（直接写名字的.json 复制代码即可）示列代码：{ "vue
复制链接

扫一扫