vscode生成html模板快捷键以及自定义html模板

黑夜里的小夜莺

已于 2022-12-26 20:15:50 修改

阅读量7.1k

点赞数 9

分类专栏： HTML的基础学习文章标签： vscode ide 编辑器

于 2022-12-26 16:38:45 首次发布

本文链接：https://blog.csdn.net/qq_61959780/article/details/128445701

版权

HTML的基础学习专栏收录该内容

4 篇文章 2 订阅

订阅专栏

一、生成html快捷键

! + tab
! + Enter

注：! 是英文的感叹号，其次直接输入 ! 再按tab或enter键，不要加 <后再按 ! + tab/enter，这种是生成不了html模板。

生成的html模板为下图：

二、上述快捷键不行，自定义html模板

第一步，点开设置-->选择配置用户代码片段

第二步，输入html.json

第三步，点击进入设置，并输入以下代码

进入时的html.json中的内容

需要增加的内容为

"h5 template": {
		"prefix": "!", // 对应的是使用这个模板的快捷键,这里定义的是!，大家自己可以随意定义，
					   //但最好不要与系统自带的重复，如果是符号注意中英文
		"body": [      //body里面就是按下tab键后生成的内容，可以根据自己的需求更改,\"、\n和\t均为转义字符
		 "<!DOCTYPE html>",
		 "<html lang=\"en\">",
		 "<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>\n",
		 "</body>",
		 "</html>"
		],
		"description": "HT-H5" // 模板的描述
	 }

添加后的html.json的内容如下：