手把手--vs code 自定义快捷模块输入

直接进入话题，手把手自己教自己配置VS code 自定义快捷模块【不要看向我，用了一段时间现在才学，太渣了】

打开vscode编辑器

第一部分：自定义快捷模块操作

1.打开命令面板

快捷键  ctrl+shift+p

 

2.输入snippets 搜索

 

回车选中

          定义代码段名称【tem】

             

 　　　　回车会打开一个文件，该文件就是用来存放自定义模块的代码【tem.code-snippets】

 第二部分：自定义快捷模块内容配置

1.内容配置规则

参数说明

• prefix：使用代码段的快捷入口
• body：需要设置的代码放在这里,字符串间换行的话使用 换行符隔开.如果值里包含特殊字符需要进行转义,多行代码以","分隔(在引号后面写逗号)
• $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"
    },
}