文章目录
vscode自定义HTML模板内容（一个、多个）- 教程篇操作如下：注意事项：`参考上图所示`；如何调用？ `如下图示`附：参考文章vscode自定义HTML模板内容（一个、多个）- 教程篇
如何让VSCode自定义一个或多个HTML模板或者其他文件模板（再如.vue模板）？
如何让VSCode调用和选择使用自定义的模板？
操作如下：
打开编辑器，依次操作【文件】--->【首选项】 ---> 【用户片段】 ---> 【输入自定义的文件名称，如html.json】，然后enter回车
输入自定义的模板代码如下：(即：html.json)
{// Place your .docs 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. 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": {// "scope": "javascript,typescript",// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }// 第一个模板代码"create new HTML5 file":{"prefix": "html5","body": ["<!DOCTYPE html>","<html>","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"author\" content=\"LF\">","\t<meta name=\"keywords\" content=\"LF\">","\t<meta name=\"description\" content=\"$1\">","\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\">","\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">","\t<title>我的模板</title>","\t<style></style>","</head>","<body>","<script>"," ","</script>","</body>","</html>"],"description": "create new HTML5 file"},// 第二个模板代码"create new Bootstrap@4.6 HTML file":{"prefix": "bt4.6","body": ["<!DOCTYPE html>","<html lang=\"zh-CN\">","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">","\t<!-- Bootstrap CSS -->","\t<link rel=\"stylesheet\" href=\"/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\" integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">","\t<title>Bootstrap模板文件</title>","\t<style>","\t\t","\t</style>","</head>","<body>"," ","<!--CDN加速提供-->","<!-- Optional JavaScript; choose one of the two! -->","<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->","<script src=\"/npm/jquery@3.5.1/dist/jquery.slim.min.js\" integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\"></script>","<script src=\"/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\" crossorigin=\"anonymous\"></script>","","</body>","</html>"],"description": "create new Bootstrap@4.6 HTML file"}}
注意事项：参考上图所示；
关于标签内属性值引号contetn="属性值"都需要添加反斜杠，即格式：contetn=\"属性值\"代码内部的双引号的正确格式，应为：\"关于模板代码\bt：两个表示两个tab缩进换行请直接使用"",html.json文件路径，及后期修改；vue模板的建立也是一样的原来，不再赘述。
如何调用？如下图示
只需要新建文件》然后输入prefix定义的关键词，选择相应模板enter 即可。注意上文
prefix对应的关键词，就是新建文件后调用模板的关键词，如下图所示：
附：参考文章
vscode自定义HTML模板内容VSCode 自定义html5模板以上就是关于“ vscode自定义HTML模板内容（一个、多个）- 教程篇 ”的全部内容。
