vscode自定义HTML模板内容

r囧r小猫 2022-12-11 13:49 235阅读 0赞

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

**1、打开首选项--用户代码片段**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZmVpOTMyNzM0NzY2_size_16_color_FFFFFF_t_70][]

**2、在打开的搜索框内搜索 ‘html.json’，并打开html.json文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZmVpOTMyNzM0NzY2_size_16_color_FFFFFF_t_70 1][]

**3、html.json文件中有一段文字以及一个example**

// 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代码片段，每个代码段都在代码段名称下定义，并具有前缀-prefix、正文-body以及描述-description。前缀的内容就是触发的代码字段，正文即将要被展开的内容（$0、$1、$2表示的是光标的位置，$0代表光标会在代码最末位置）。

若还是不理解，可将示例打开，在html文件中输入log后回车，即可看到展开内容--console.log()

![20200630194751341.jpg][]

**4、在html.json中输入自己的模板**（按自身需要增减内容）

"create new HTML file":{
    		"prefix": "html5",
    		"body": [
    			"<!DOCTYPE html>",
    			"<html>",
    			"<head>",
    				"\t<meta charset=\"UTF-8\">",
    				"\t<meta name=\"author\" content=\"LF\">",
    				"\t<meta name=\"description\" content=\"$1\">",
    				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
    				"\t<title></title>",
    			"</head>",
    			"<body>",
    			"<script>",
    			" ",
    			"</script>",
    			"</body>",
    			"</html>"
    		],
    		"description": "create new HTML file"

body中引号需要使用反斜杠\\转义，行之间用逗号隔开。

保存之后即可在新建的html中使用输入prefix的值进行测试，自定义html模板完成。

![20201002111724482.png][]

既然可以自定义html模板，那也可以自定义其他的代码片段，举一反三。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZmVpOTMyNzM0NzY2_size_16_color_FFFFFF_t_70]: /images/20221123/4110e4834bb441fd8457e8f98df9ec6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZmVpOTMyNzM0NzY2_size_16_color_FFFFFF_t_70 1]: /images/20221123/4805523159e34c28b717131f7bb3cd4a.png
[20200630194751341.jpg]: /images/20221123/d8c255fd1b1943af8039b67408162210.png
[20201002111724482.png]: /images/20221123/7dde8733cbbb495c8ac52adc68f540f6.png