VS Code新手常用的HTML模板

最新推荐文章于 2023-09-05 23:01:45 发布

敲泥蛙的代码

最新推荐文章于 2023-09-05 23:01:45 发布

阅读量4.3k

点赞数 2

文章标签： vscode ide visual studio code

本文链接：https://blog.csdn.net/qq_45131215/article/details/125188368

版权

前言

大家在使用VS Code编写HTML文档时，通常会因为需要重复敲出固定的格式需求感到苦恼，下面有几个构建好的模板，只需要快捷键就可以一键写出格式。

大多数使用vscode编辑器的朋友都知道，新建html文件之后直接！+Tab键即可新建一个HTML模板，但是这只是一个基础版，当然也可以自定义HTML模板。

1.点击文件，打开首选项，选择用户片段

2.在搜索框搜索“html.json”文件，然后打开

里面有一大段绿色代码如下

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

翻译之后就是将 html 代码片段放在这里。每个代码段都在代码段名称下定义，并具有前缀、主体和描述。前缀是用来触发代码段的，主体将被展开并插入。可能的变量是: $1，$2用于制表位，$0用于最终的光标位置，${1: label } ，${2: 另一个}用于占位符。具有相同 ID 的占位符连接在一起。

Example之后是一个示例。

3.在绿色括号之后，黄色括号之前输入以下代码

"h5 template":{
		"prefix": "h",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"zh-cn\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>Document</title>",
			"</head>",
			"<body>",
			"\t $0",
			"</body>",
			"</html>",
		],
		"description": "h5模板"
	},

	"h5 template内部样式表":{
		"prefix": "hh",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"zh-cn\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>Document</title>",
			"\t<style type=\"text/css\">",
			"\t\t",
			"\t</style>",
			"</head>",
			"<body>",
			"\t $0",
			"</body>",
			"</html>",
		],
		"description": "内部样式表"
	},

	"h5c3js template外部样式表":{
		"prefix": "hhh",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"zh-cn\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>Document</title>",
			"\t<link rel=\"stylesheet\" type=\"text/css\" href=\" \">",
			"\t<script src=\" \"></script>",    
			"</head>",
			"<body>",
			"\t $0",
			"</body>",
			"</html>",
		],
		"description": "外部样式表"
	}

其中prefix之后为设置的快捷键，这里我设置了三个模板（因为新手，学的不多，以后慢慢收录），在第一行输入h，会出现以下提示