vscode中添加用户代码片段

这里以创建一个输入vh弹出自定义代码片段为例：

image

首先，在设置中打开用户代码片段，也可以快捷键Ctrl+Shift+P打开命令输入 snippet ，也可以点击文件=>首选项=>用户代码片段

image

在这里选择新建，也可以为系统默认的进行配置

image

在默认的情况下，文件内部是这样的

image

Print to console 是代码片段的名称

prefix 字段为代码片段前缀，定义如何从IntelliSense和选项卡完成中选择此代码段

body 即代码片段的主体内容，其中每个字符串表示一行

description 字段为代码片段说明，会在 IntelliSense 候选栏中出现，也就是描述

image

其中{2}、${3}

用“Tabstops”可以让编辑器的指针在 snippet 内跳转。

使用 2 等指定光标位置。这些数字指定了光标跳转的顺序，按tab键，光标移到下一个指定位置。特别地，$0表示最终光标位置，两个相同的制表符，代表同时进行两个区域的选择。

下面是我的代码片段，可以根据我的进行修改，创建属于你的用户代码片段

---

{

    "doc for html5vue": {

        "prefix": "vh",

        "body": [

            "",

            "",

            "",

            "    ",

            "    ",

            "    ",

            "    ",

            "",

            "",

            "
",

            "    ${1}",

            "
",

            "  ",

            "",

            ""

        ],

        "description": "快速生成htvue"

    }

}

生成效果如下：

image