申城阿铁 發表於 2019-9-5 15:44:00

VSCode 自定义html5模板

<p>（一）新建html快捷键</p>
<p>当我们想在VSCode中新建html代码时，可以 输入! 然后回车或者Tab即可自动生成一个html文件模板，效果如下：</p>
<p><img src="https://img2018.cnblogs.com/blog/1556894/201909/1556894-20190905152342406-245759318.png"></p>
<p>&nbsp;</p>
<p>&nbsp;<img src="https://img2018.cnblogs.com/blog/1556894/201909/1556894-20190905152427373-1226105665.png"></p>
<p>&nbsp;</p>
<p>&nbsp;（二）自定义html5模板</p>
<p>但我们每次新建html模板时候，总是感觉太单调，例如我是希望每次新建都自动引入Vue并新建一个空的页面模板，这是是完全可以实现的：</p>
<p>（1）找到html.json文件：点击设置，找到用户代码片段</p>
<p><img src="https://img2018.cnblogs.com/blog/1556894/201909/1556894-20190905153014381-1327680280.png"></p>
<p>&nbsp;</p>
<p>搜索html，出现html.json文件，点击即可</p>
<p>&nbsp;<img src="https://img2018.cnblogs.com/blog/1556894/201909/1556894-20190905153123439-37627027.png"></p>
<p>（2）打开html.json文件后即可自定义设置H5模板</p>
<p><img src="https://img2018.cnblogs.com/blog/1556894/201909/1556894-20190905153825418-1366045054.png"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;附上html.json文件配置，直接填入原大括号中即可：</p>
<div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;"h5 template": {</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"prefix": "vh", // 对应的是使用这个模板的快捷键</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"body": [</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;!DOCTYPE html&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;html lang=\"en\"&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;head&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;meta charset=\"UTF-8\"&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;title&gt;Document&lt;/title&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;script src=\"./lib/vue-2.4.0.js\"&gt;&lt;/script&gt;",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;/head&gt;\n",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;body&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;div id =\"app\"&gt; &lt;/div&gt;\n",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;script&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t //创建Vue实例,得到 ViewModel",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t var vm = new Vue({",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t\tel: '#app',",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t\tdata: {},",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t\tmethods: {}",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t });",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "\t&lt;/script&gt;",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;/body&gt;\n",</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;/html&gt;"</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"description": "HT-H5" // 模板的描述</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp; }</div>
<div>&nbsp;</div>
</div>
<p>&nbsp;转义字符解释：</p>
<p>\t \" \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格<br>\t 的意思是 横向跳到下一制表符位置 等于 Tab键<br>\" 的意思是 双引号<br>\n 的意思是回车换行</p><br><br>
来源：https://www.cnblogs.com/wgyhon/p/11466449.html
頁: [1]
查看完整版本: VSCode 自定义html5模板