VSCode 自定义html5模板
生活随笔
收集整理的這篇文章主要介紹了
VSCode 自定义html5模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
新建html快捷鍵
當我們想在VSCode中新建html代碼時，可以 輸入! 然后回車或者Tab即可自動生成一個html文件模板，效果如下：
（二）自定義html5模板
但我們每次新建html模板時候，總是感覺太單調，例如我是希望每次新建都自動引入Vue并新建一個空的頁面模板，這是是完全可以實現的：
（1）找到html.json文件：點擊設置，找到用戶代碼片段 （找到File— preferences — User Snippets）
搜索html，出現html.json文件，點擊即可
（2）打開html.json文件后即可自定義設置H5模板
{// 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"// }"h5 template": {"prefix": "vue", // 對應的是使用這個模板的快捷鍵"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=\"../js/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": "HT-H5" // 模板的描述} }總結
以上是生活随笔為你收集整理的VSCode 自定义html5模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创建Vue实例传入的options||V
- 下一篇： v-pre的指令|| v-cloak 的