VScode-snippet-用户代码片段

分割线

开启-snippet

  • 首先需要打开 markdown 文件的 quickSuggestions,因为其默认是未开启状态

    20210131221250

  • 在设置文件里加上以下设置

    1
    2
    3
    4
    "editor.snippetSuggestions": "top",
    "[markdown]": {
      "editor.quickSuggestions": true
    }

分割线

入门代码片段

20210131221522

  • 点小齿轮找到用户代码片段设置,进入设置文件,在大括号里添加自定义的代码片段,比如下面我的:

    这个片段就可以在 markdown 文件内输入divider快速生成模板,省去复制的麻烦了.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "Divider": {
      "scope": "markdown",
      "prefix": "divider",
      "body": [
        "",
        "<a>![分割线](https://fastly.jsdelivr.net/gh/Weidows/Images/img/divider.png)</a>",
        ""
      ]
    }

分割线

深入-位置匹配

  • tab stops: 当按下 tab 补全后光标所跳转到的位置,第一个位置完成后再按 tab 切到第二个位置,以此类推[1]

    $1 : 第一个位置

    $2 : 第二个位置

    $3 : 第三个位置

    …

    $0 : 补全上面所有位置后光标停留位置

  • 这样一个场景: 想打一个 mermaid,然后出来下面这样

    可以这样: (抱歉贴代码会报错,贴图吧)

  • 接下来, 我们想对多个位置同时操作:

    当输入 paper-footnote 后按下 tab, 所有$1 处都会出现光标,可以同时操作

  • 对于上面例子, 操作完所有$1 位置后,我们想跳到中间那行位置

    下面两种都是可以的,操作完$1 后再按 tab 就会跳转, 只不过$2 概念上来说是下一步位置, $0 概念上是最后位置

分割线

借物表

[1]: VS Code 代码片段完全入门指南