VScode添加自定义代码段snippet

snippet 简介

snippet即代码段，指的是能够帮助输入重复代码模式，比如循环或条件语句的模板。通过 snippet ，我们仅仅输入一小段字符串，就可以在代码段引擎的帮助下，生成预定义的模板代码，接着我们还可以通过在预定义的光标位置之间跳转，来快速补全模板。

vsCode进入snippet的三种方法

1.通过快捷键「Ctrl + Shift + P」打开命令窗口（All Command Window），输入「snippet」，点选「首选项：配置用户代码段片段」；

2.点击界面最左侧竖栏（也即活动栏）最下方的齿轮按钮，在弹出来的菜单中点选「用户代码片段」

3.按下「Alt」键切换菜单栏，通过文件 > 首选项 > 用户代码片段；

例子简介

在以上的输入框中输入vue,找到 vue.json ，然后在 vue.json 里面配置。以下是一个vue的例子

{
    // 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"
    // }
}

• prefix：前缀，定义了 snippets 从 IntelliSense 中呼出的关键字
• body： 主体，即模板的主体内容，其中每个字符串表示一行
• description：说明，会在 IntelliSense 候选栏中出现。未定义的情况下直接显示对象名。
  把上面的设置更改为自己想要的样子

{ // 把example 的注释去掉
    "Print to console": {// 这个代码段的名字,随便起
        "prefix": "log",// 绑定的关键字
        "body": [// 输入 Log 时，生成的内容,每行内容包含在双引号里，用逗号间隔
            "console.log('$1');",//$1 光标出现的位置，如果不设置，默认出现在末尾
            "$2"//用tab,切换到下一个参数位置
        ],
        "description": "Log output to console"//对这个代码段的简单描述
    }
}