VScode-snippet-用户代码片段

分割线

开启-snippet

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

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

    "editor.snippetSuggestions": "top",
    "[markdown]": {
    "editor.quickSuggestions": true
    }

分割线

入门代码片段

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

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

    "Divider": {
    "scope": "markdown",
    "prefix": "divider",
    "body": [
    "",
    "<a>![分割线](https://pan.weidows.tech/d/local/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 代码片段完全入门指南