VSCode 自定义html5模板的实现
发布时间：2019-12-05 15:32:40 作者：汉唐风雨夜 
我要评论
我要评论这篇文章主要介绍了VSCode 自定义html5模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
（一）新建html快捷键
当我们想在VSCode中新建html代码时，可以 输入! 然后回车或者Tab即可自动生成一个html文件模板，效果如下：
（二）自定义html5模板
但我们每次新建html模板时候，总是感觉太单调，例如我是希望每次新建都自动引入Vue并新建一个空的页面模板，这是是完全可以实现的：
（1）找到html.json文件：点击设置，找到用户代码片段
搜索html，出现html.json文件，点击即可
（2）打开html.json文件后即可自定义设置H5模板
附上html.json文件配置，直接填入原大括号中即可：
"h5 template": {
"prefix": "vh", // 对应的是使用这个模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"./lib/vue-2.4.0.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"> </div>\n",
"\t<script>",
"\t //创建Vue实例,得到 ViewModel",
"\t var vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "HT-H5" // 模板的描述
}
转义字符解释：
\t \" \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置 等于 Tab键
\" 的意思是 双引号
\n 的意思是回车换行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
vscode怎么设置html标签自动补全? vscode自动补全html的技巧
vscode怎么设置html标签自动补全？vscode修改html标签名时，想要实现自动补全的效果，该怎么设置呢？下面我们就来看看vscode自动补全html的技巧，需要的朋友可以参考下2020-09-23
这篇文章主要介绍了vscode 中保存后html自动格式化的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-23
VSCode怎么安装插件运行HTML文件？VSCode中无法直接运行html文件，需要借助插件来运行，下面我们就来介绍插件的安装以及运行html文件的方法，2019-07-11
SublimeText3怎么快速输入html5格式？经常使用Sublime Text3做一些编程开发，今天我们就来简单介绍Sublime Text3文件基本格式快速输入的方法，需要的朋友可以参考下2019-04-24- Sublime Text2怎么新建一个HTML头部文件？Sublime Text2中想要生成一个html文档的头部文件，但是按住Tab键根本没反应，该怎么办恩？下面我们就来看看详细的教程，需要的朋2016-11-19
sublime / vscode 快捷生成HTML代码的实现
这篇文章主要介绍了sublime / vscode 快捷生成HTML代码的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-02
最新评论