vs code 配置html模板

拼搏现实的明天。 2021-12-11 06:49 273阅读 0赞

# vs code 配置html模板 #

1.  找到配置位置

> 首选项 - 用户代码片段 - 输入html.json

![在这里插入图片描述][70]  
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"
    	// }
    	"html5 demo": {
    		"prefix": "!5",   // 这个是你输入的快捷代码
    		"body": [// 这里是插入的内容
    			"<!DOCTYPE html>",
    			"<html lang='en'>",
    			"<head>",
    				"\t<meta charset='UTF-8'>",
    				"\t<meta name='referrer' content='always'>",
    				"\t<meta name='author' content='qiphon'>",
    				"\t<meta name='robots' content='none'>",
    				"\t<meta name='keywords' content=''>",
    				"\t<meta name='description' content=''>",
    				"\t<meta name='renderer' content='webkit'>",
    				"\t<meta name='revisit-after' content='7 days' >",
    				"\t<meta http-equiv=widow-target Content=_top>",
    			    "\t<meta name='viewport' content='width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no, shrink-to-fit=no' viewport-fit=cover />",
    			    "\t<meta http-equiv='X-UA-Compatible' content='ie=edge,chrome=1'>",
    				"\t<title>$1</title>",  // 光标首次会在$1 的地方，按tab 会跳到 $2
    				"\t<style>",
    					"\t\t *{",
    						"\t\t\tmargin:0;",
    						"\t\t\tpadding:0;",
    						"\t\t\tbox-sizing:border-box;",
    						"\t\t\t-webkit-tap-highlight-color:transparent;",
    					"\t\t}",
    				"\t</style>",
    			"</head>",
    			"<body>",
    			    "\t$2",
    			"</body></html>"
    		],
    		"description": "html5 专用 create by qiphon"  // 这里是你的快捷输入的时候 VS code 提示的文字
    	}
    }

感谢网友[SilenceJude][]

[70]: /images/20211211/3c6f57a5a6da4c8db03f77efe4b50851.png
[SilenceJude]: https://blog.csdn.net/silencejude/article/details/83273950