vscode——自定义html模板

最新推荐文章于 2024-04-28 23:30:46 发布

原创最新推荐文章于 2024-04-28 23:30:46 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #html

vscode 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Visual Studio Code中创建自定义的HTML代码片段，通过`h5template`前缀快速生成基本HTML5结构，提高前端开发效率。用户可以在首选项设置中搜索html.json来编辑和管理个人代码片段。

操作流程：文件 --> 首选项 --> 用户片段 --> 搜索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"
	// }
	"h5 template" :{
		"prefix": "h5 template",  // 敲这个代码就会生成html片段
		"body": [
			"<html lang=\"en\">",
			"\t<head>",
			"\t\t<title>标题</title>",
			"\t</head>",
			"\t<body>",
			"\t</body>",
			"</html>"
		]
	}
}