最近开始学习vue的一些课程总要写html相关的东西,虽然可以复制粘贴,但还是觉得麻烦找了一下可以使用vscode 的自定义模版的文件使用方法。我也写一个放这里做做笔记。
vscode自定义文件模版 本例子以 html5 为例
在使用vscode开发的时候可以使用 ! 来快速生成html的模版,那么我们要实现的效果就是如此。
设置>用户代码片段
搜索html 后回车 或者 直接写个名字后回车也行
写入.json 里的文件信息 (直接写名字的.json 复制代码即可)
示列代码:
{
"vue h5 template": {
"prefix": "vtem", // 对应的是使用这个模板的快捷键
"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=\"../vue.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"> {{message}} </div>\n",
"\t<script>",
"\t var app = new Vue({",
"\t\tel: '#app',",
"\t\tdata: { message: 'hi' },",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "H5 vue-template" // 模板的描述
}
}
转义字符解释:
\t " \n都是转义字符,而空格就是单纯的空格,输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置 等于 Tab键
" 的意思是 双引号
\n 的意思是回车换行
这段代码贴到那个.json 文件里就行了
效果:
输入vtem 回车 生成相对应的代码文件
博客地址:https://blog.csdn.net/mijac_lan