VSCode自定義快捷鍵生成Vue例項模板
阿新 • • 發佈：2021-12-08
轉自：https://www.cxyzjd.com/article/qq_32755875/105844443
vscode中，在一個空白的頁面中通過vh快捷鍵生成一個vue模板
效果如下：
下面就演示一下是如何實現的
- 開啟VScode→檔案→首選項→使用者程式碼片段
- 點進去之後，選擇html.json
- 將紅框部分的註釋解開
- 修改prefix的值，和description部分的描述
- 將你自定義的模板程式碼貼入到body中，這裡注意，每一行都是用雙引號引起來的，每一行行末要用逗號（,）隔開，如圖。
整體程式碼如下：
{
// 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:
"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>",
" <!-- 匯入 vue 檔案 -->",
" <script src=\"./lib/vue-2.5.22.js\"></script>",
" <script src=\"./lib/vue-router_3.0.2.js\"></script>",
" </head>",
"",
" <body>",
" <!-- 被 vm 例項所控制的區域 -->",
" <div id=\"app\"></div>",
"",
" <script>",
" //建立 vm 例項物件",
" const vm = new Vue({",
" //指定控制的區域",
" el:'#app',",
" data:{},",
" });",
" </script>",
" </body>",
"</html>",
],
"description": "vh components"
}
}
然後就可以新建一個空白html檔案，輸入vh，按下tab會自動補全你設定的程式碼段啦！