第一步：找到 html.json 文件
進入vscode界面，使用快捷鍵 command+shift+p 或如下圖操作也行，然後搜索 html.json
注意：使用快捷鍵 command+shift+p，默認會有一個大於號，記得刪除掉，然後輸入 html.json 進行搜索
第二步：打開修改 html.json 文件
打開默認爲如下內容
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
添加修改後，內容如下：
// {
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// }
{
"vh": {
"prefix": "vh", // 觸發的關鍵字 輸入vh按下tab鍵
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
" <!-- <script src=\"https://cdn.bootcss.com/vue/2.4.2/vue.min.js\"></script>--> ",
" <!-- 開發環境版本，包含了有幫助的命令行警告 -->",
" <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\"></div>",
" <script>",
" var vm=new Vue({",
" el:'#app',",
" data:{},",
" methods:{}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}
第三步：創建一個新的html頁面，輸入vh
創建一個新的html頁面，輸入vh，按下enter鍵，就會自動生成一個簡單的vue模板啦
生成的模板，如下：
