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 相关文章推荐
css3 border-image使用说明
Jun 23 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 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
PHP个人网站架设连环讲(一)
2006/10/09 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python生成器常见问题及解决方案
2020/03/21 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
导师推荐信范文
2014/05/09 职场文书
感谢信格式范文
2015/01/22 职场文书
步步惊心观后感
2015/06/12 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL