vscode快速生成html框架(VSCode 自定义html5模板的实现)
类别:Web前端 浏览量:2533
时间:2021-10-04 01:45:34 vscode快速生成html框架
VSCode 自定义html5模板的实现(一)新建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<li id =\"app\"> </li>\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 的意思是回车换行
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- reactnative混合开发教程(教你使用vscode 搭建react-native开发环境)
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- vscode报错提示框(关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题)
- 如何在vscode中运行linux(解决VScode配置远程调试Linux程序的问题)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- ubuntu下vscode的使用教程(Vscode远程连接Ubuntu出错问题的解决方法)
- ubuntu下使用vscode(使用Vscode结合docker进行开发的详细过程)
- vscode react插件(基于visual studio code + react 开发环境搭建过程)
- vscode如何配置python环境(VSCode Python开发环境配置的详细步骤)
- docker socket文件丢失(解决vscode docker插件docker.socket权限问题)
- vscode开发数据库(Vscode上使用SQL的方法)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
- 杭州旅游攻略()
热门推荐
- linux下如何启动phpstudy面板(详解phpstudy linux web面板小皮面板V0.2版本正式发布)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- 宝塔面板怎么修改默认端口(如何修改宝塔Linux面板默认的端口号8888?)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- html为什么视频不能自动播放(html5中嵌入视频自动播放的问题解决)
- navicat连接报错10038(解决Navicat for Mysql连接报错1251的问题连接失败)
- pythonjson库(Python常用的json标准库)
- webview上传功能教程(关于webview适配H5上传照片或者视频文件的方法)
- js时间变成日期格式(js日期时间格式化的方法实例)
- html5自定义字体图标(HTML5给汉字加拼音收起展开组件的实现代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9