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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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
文件上传程序的全部源码
2006/10/09 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Numpy掩码式数组详解
2018/04/17 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
jQuery treeview树形结构应用
2021/03/24 jQuery
《挑山工》的教学反思
2014/02/16 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
三严三实学习心得体会
2014/10/13 职场文书
论群众路线学习笔记
2014/11/06 职场文书
会计岗位职责
2015/02/03 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
实习护士自荐信
2015/03/25 职场文书
员工升职自荐信
2015/03/27 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
国际贸易实训总结
2015/08/03 职场文书
医德医风学习心得体会
2016/01/25 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js