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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
纯html+css实现打字效果
Aug 02 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获取时间排除周六、周日的两个方法
2014/06/30 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
angular动态表单制作
2018/02/23 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python读取文本中的坐标方法
2018/10/14 Python
基于python实现学生管理系统
2018/10/17 Python
python文件读写代码实例
2019/10/21 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书