VSCode 自定义html5模板的实现


Posted in HTML / CSS onDecember 05, 2019

(一)新建html快捷键

当我们想在VSCode中新建html代码时,可以 输入! 然后回车或者Tab即可自动生成一个html文件模板,效果如下:

VSCode 自定义html5模板的实现

VSCode 自定义html5模板的实现

 (二)自定义html5模板

但我们每次新建html模板时候,总是感觉太单调,例如我是希望每次新建都自动引入Vue并新建一个空的页面模板,这是是完全可以实现的:

(1)找到html.json文件:点击设置,找到用户代码片段

VSCode 自定义html5模板的实现

 搜索html,出现html.json文件,点击即可

VSCode 自定义html5模板的实现

(2)打开html.json文件后即可自定义设置H5模板

VSCode 自定义html5模板的实现

附上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 的意思是回车换行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 #HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 #HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 #HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 #HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 #HTML / CSS
web字体加载方案优化小结
Nov 29 #HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 #HTML / CSS
You might like
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
JavaScript延迟加载
2021/03/09 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
js实现日历的简单算法
2017/01/24 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
jQuery treeview树形结构应用
2021/03/24 jQuery
新春文艺演出主持词
2014/03/27 职场文书
答谢会策划方案
2014/05/12 职场文书
会员活动策划方案
2014/08/19 职场文书
工作所在部门证明
2014/09/21 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
公司承诺书格式范文
2015/04/28 职场文书
房屋质量投诉书
2015/07/02 职场文书
导游词之珠海轮廓
2019/10/25 职场文书