手把手--vs code 自定義快捷模塊輸入

直接進入話題，手把手自己教自己配置VS code 自定義快捷模塊【不要看向我，用了一段時間現在才學，太渣了】

打開vscode編輯器

第一部分：自定義快捷模塊操作

1.打開命令面板

快捷鍵  ctrl+shift+p

 

 

 

 

 

 

 

 

 

 

 

 

2.輸入snippets 搜索

 

回車選中

 

          定義代碼段名稱【tem】

 

             

 　　　　回車會打開一個文件，該文件就是用來存放自定義模塊的代碼【tem.code-snippets】

 第二部分：自定義快捷模塊內容配置

1.內容配置規則

參數說明

• prefix：使用代碼段的快捷入口
• body：需要設置的代碼放在這里,字符串間換行的話使用\r\n換行符隔開.如果值里包含特殊字符需要進行轉義,多行代碼以","分隔(在引號后面寫逗號)
• $0：定義最終光標位置
• $1：定義第一次光標位置，按tab鍵可進行快速切換, 還可以有 $2, $3, $4, $5 ...
• description：代碼段描述,在使用智能感知時的描述

我這邊自己定義一個vue模塊 代碼如下

 // 自定義(vue頁面結構)
 {
     "vue": {
    "prefix": "vue-tem", // 設置的快捷入口
    "body": [ // 模塊內容
        "<!-- $1 -->", // 光標
        "<template>",
        "  <div>",
        "     $2",
        "  </div>",
        "</template>",
        "",
        "<script>",
        "  export default {",
        "    name: '',",
      "    components: {",
      "         ",
      "    },",
      "    props: {",
      "       ",
      "    },",
      "    data() {",
      "      return {",
      "          ",
      "      }",
      "    },",
      "    computed: {",
      "        ",
      "    },",
      "    created() {",
      "        ",
        "    },",
      "    methods: {",
      "        ",
        "    },",
        "    watch: {",
        "       ",
        "    },",
        "  }",
            "</script>",
            "",
            "<style scoped lang=''>",
            "    ",
            "</style>"
    ],
    "description": "Vue templet" // 說明
 }
}

然后打開任意一個空白vue文件，輸入vue-tem，回車直接生成自定義body內的代碼，不重復貼出來了。【懶~】【到這步肯定知道咋操作了】

 

參考鏈接 https://www.cnblogs.com/shenxianhui/p/9361957.html

 

 第三部： 定義已有的文件

讓我們把時間線回到第一步，輸入snippets時，不要定義文件，直接輸入vue（html ，JavaScript等也可以）

打開vue.json 文件（我是直接默認這個了）

定義模塊內容，這里定義了console【原模板已有，放開注釋即可 = . =】

{
    // Place your snippets for vue 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"
    },
}