VScode-snippet-用户代码片段

• VScode-snippet-用户代码片段
  • 开启-snippet
  • 入门代码片段
  • 深入-位置匹配
  • 借物表

开启-snippet

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

  

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

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

入门代码片段

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

  这个片段就可以在 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 代码片段完全入门指南