VS code中設定html5 程式碼片段（vue）
阿新 • • 發佈：2018-11-26
檔案 —> 首選項 —> 使用者程式碼片段，開啟html.json(HTML)
說明：每一行都要用雙引號"引起來，並且用逗號,分隔 ，每個需要顯示出來的雙引號都要用\斜槓轉義
個人使用如下設定
{ // 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" // } "vue-template":{ "prefix":"h", "body":[ "<!DOCTYPE html>", "<html lang=\"zh-CN\">", "<head>", "\t<meta charset=\"UTF-8\">", "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">", "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">", "\t<title>Document</title>", "\t<link rel=\"stylesheet\" href=\"../lib/node_modules/bootstrap/dist/css/bootstrap.css\">", "\t<script src=\"../lib/vue-2.4.0.js\"></script>", "\t<script src=\"../lib/vue-resource.js\"></script>", "\t<link rel=\"stylesheet\" href=\"$1\">", "\t<script src=\"$2\"></script>", "</head>", "<body>", "<div id=\"app\">", "", "</div>", "", "<script>", " var vm = new Vue({", " el:'#app',", " data:{},", " methods:{}", " }) ;", " </script>", "</body>", "</html>" ], "description": "my vue template" } }
在html 頁面中只需，輸入h就可以出現上述設定好的程式碼片段以供使用。
