vscode自定义HTML、vue等模板内容（一个、多个）- 教程篇

草巾冒小子

已于 2022-07-10 14:06:46 修改

阅读量1.9k

点赞数 2

分类专栏： VSCode 文章标签： vscode vue.js html

于 2022-01-06 11:30:44 首次发布

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/116522827

版权

开发工具同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

VSCode

21 篇文章 8 订阅

订阅专栏

文章目录

vscode自定义HTML模板内容（一个、多个）- 教程篇

vscode自定义HTML模板内容（一个、多个）- 教程篇

如何让VSCode自定义一个或多个HTML模板或者其他文件模板（再如.vue模板）？
如何让VSCode调用和选择使用自定义的模板？

操作如下：

打开编辑器，依次操作 【文件】--->【首选项】 ---> 【用户片段】 ---> 【输入自定义的文件名称，如html.json】，然后enter回车

输入自定义的 模板代码如下： (即：html.json)

{
	// Place your ckt.net.docs 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	
	// 第一个模板代码
	"create new HTML5 file":{
		"prefix": "html5",
		"body": [
			"<!DOCTYPE html>",
			"<html>",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"author\" content=\"LF\">",
				"\t<meta name=\"keywords\" content=\"LF\">",
				"\t<meta name=\"description\" content=\"$1\">",
				"\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"\t<title>我的模板</title>",
				"\t<style></style>",
			"</head>",
			"<body>",
			"<script>",
			" ",
			"</script>",
			"</body>",
			"</html>"
		],
		"description": "create new HTML5 file"
	},
	// 第二个模板代码
	"create new Bootstrap@4.6 HTML file":{
		"prefix": "bt4.6",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"zh-CN\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">",
				"\t<!-- Bootstrap CSS -->",
				"\t<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\" integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">",
				"\t<title>Bootstrap模板文件</title>",
				"\t<style>",
				"\t\t",
				"\t</style>",
				"</head>",
			"<body>",
			" ",
			"<!--CDN加速提供-->",
			"<!-- Optional JavaScript; choose one of the two! -->",
			"<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->",
			"<script src=\"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js\" integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\"></script>",
			"<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\" crossorigin=\"anonymous\"></script>",
			"",
			"</body>",
			"</html>"
		],
		"description": "create new Bootstrap@4.6 HTML file"
	}
}

在这里插入图片描述

注意事项：`参考上图所示`；

关于标签内属性值引号contetn="属性值" 都需要添加反斜杠，即格式：contetn=\"属性值\"
代码内部的双引号的正确格式，应为：\"
关于模板代码\bt ：两个表示两个tab缩进
换行请直接使用"",
html.json文件路径，及后期修改；
vue模板的建立也是一样的原来，不再赘述。

如何调用？ `如下图示`

注意上文prefix对应的关键词，就是新建文件后调用模板的关键词，如下图所示：

只需要新建文件》然后输入prefix定义的关键词，选择相应模板enter 即可。

附：vue模板

{
	// Place your snippets for vue 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"
	// }

	// 第一个模板代码
	"create new vue3module file":{
		"prefix": "vue3module",
		"body": [
			"<template>",
			"\t<div id=\"appWrap\">",
			"\t</div>",
			"</template>",
			" ",
			"<script>",
			"\texport default {",
			"\t\tdata() {",
			"\t\t\treturn {",
			"\t\t\t}",
			"\t\t},",
			"\t\tmounted(){",
			"\t\t},",
			"\t\tmethods:{",
			"\t\t}",
			"\t}",
			"</script>",
			" ",			
			"<style scoped>",
			"/* 自定义css区域 */",			
			"</style>",


		],
		"description": "create new Vue3-Module file"
	},
	// 第二个模板代码
	
}

附：参考文章

以上就是关于“ vscode自定义HTML模板内容（一个、多个）- 教程篇 ”的全部内容。

草巾冒小子

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vscode自定义HTML、vue等模板内容（一个、多个）- 教程篇

文章目录vscode自定义HTML模板内容（一个、多个）操作如下：附：参考文章vscode自定义HTML模板内容（一个、多个）如何让VSCode自定义一个或多个HTML模板或者其他文件模板（再如.vue模板）？如何让VSCode调用和选择使用自定义的模板？操作如下：附：参考文章vscode自定义HTML模板内容......
复制链接

扫一扫