VSCode 自定义html模板

最新推荐文章于 2023-10-09 22:16:09 发布

码路小匠

最新推荐文章于 2023-10-09 22:16:09 发布

阅读量3.5k

点赞数 9

分类专栏： # 01. 工具 # 08. Vue 文章标签： visual studio code

本文链接：https://blog.csdn.net/wls666/article/details/113190889

版权

01. 工具同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

08. Vue

6 篇文章 0 订阅

订阅专栏

前言: 在code时，希望使用快捷键，快速构建模板，不仅可以提供工作效率，而且也丰富了编码的乐趣。

VSCode 自定义html模板

第一步: 找到 html.json 文件

打开vscode → 设置 → 选择User Snippets
搜索 html.json 文件

第二步: 添加html模板

在 html.json 文件中自定义html模板
在这里插入图片描述
代码块如下:

"h5 template": {
		"prefix": "vv", // 这个模板的快捷键
		"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>",
		 "</head>\n",
		 "<body>",
		 "\t<div id =\"app\"> </div>\n",
		 "\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>  <!-- vue 路径-->",
		 "\t<script>",
		 "\t //创建Vue实例,得到 ViewModel",
		 "\t const vm = new Vue({",
		 "\t\tel: '#app',",
		 "\t\tdata: {},",
		 "\t\tmethods: {}",
		 "\t });",
		 "\t</script>",
		 "</body>\n",
		 "</html>"
		],
		"description": "HT-H5" // 模板的描述
 	}