（一）新建html快捷鍵
當我們想在VSCode中新建html代碼時，可以 輸入! 然后回車或者Tab即可自動生成一個html文件模板，效果如下：
效果如下：
但是有時候我們需要創建一些個性化的，可能需要大量重復使用的模板，例如我們在學習vue時，每次寫一個demo都要重復引入vue.js並且創建new Vue等，很焦躁，這個時候我們就可以通過下面的方式搞一個模板，然后就像我們上面輸入“！”觸發html原生模板一樣，輸入我們自定義的觸發標志觸發我們的個性化自定義模板：
之后會打開一個json文件：
這些注釋就是告訴你怎么寫模板。。。估計你也看不懂。。。。，先刪掉吧。最后就剩下“{}”；
然后我們把下面的模板內容黏貼進“{}”中：
"vue_learn_template":{ "prefix": "vl", "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.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": "vue學習時創建文件的模板" // 模板的描述 }
轉義字符解釋：
\t \" \n都是轉義字符，而空格就是單純的空格，輸入時可以輸入空格
\t 的意思是 橫向跳到下一制表符位置 等於 Tab鍵
\" 的意思是 雙引號
\n 的意思是回車換行
最后的json文件內容如下圖：
最終使用效果如下：
輸入我們自定義的觸發標志：
回車之后的效果：
是不是很騷、、、