VS Code新手常用的HTML模板

前言

大家在使用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，会出现以下提示

点击回车出现以下情况：

三个模板分别是系统自带的空白模板（点击h+回车使用），第二个是引用内部样式表的模板（点击hh+回车使用），第三个是引用外部样式表的模板（点击hhh+回车使用）。

既然可以自定义html模板，那也可以自定义其他的代码片段，举一反三。body中引号需要使用反斜杠\转义，行之间用逗号隔开，空格可使用\t表示，最后$0决定光标最后留在哪里。

赶快学起来在你的小伙伴面前装杯吧！