VSCode 用户代码片段

前言

之前水文章的时候发现，每次用标签插件都要打开文章去复制粘贴，刚开始还觉得没啥，标签插件用多了之后发现特别麻烦，于是就有了能否用快捷键，一键自动补全代码的想法，如果你也有这种需求，这篇文章或许能帮助到你。

配置 settings.json

首先需要在 settings.json 文件中把 markdown 的 quickSuggestions 功能打开

"[markdown]": {
    "editor.quickSuggestions": true
}

配置 markdown.json

在 markdown.json 文件中编辑你需要使用的代码片段模板

"note": {   //快捷键名字
  "prefix": "note",   //快捷键触发代码
  "body": [
    "{% note info %}",  //需要自动补全的代码片段
    "$1",
    "{% endnote %}"
  ],
  "description": "note"   //快捷键描述
}

这里不得不安利一个在线生成代码片段模板的网站，非常好用~

snippet generator

实际使用方法

按上述两个步骤配置好后，直接敲击你设置的 prefix 快捷键触发代码，按 tab 或者 enter，代码片段就自动补全啦！

下面贴出我自己 markdown.json 文件的一小部分供大家参考

{
  "note": {
    "prefix": "note",
    "body": [
      "{% note info %}",
      "$1",
      "{% endnote %}"
    ],
    "description": "note"
  },
  "card": {
    "prefix": "card",
    "body": [
      "{% link 标题, 链接 %}"
    ],
    "description": "card"
  },
  "checkbox": {
    "prefix": "check",
    "body": [
      "{% checkbox green checked, $1 %}"
    ],
    "description": "checkbox"
  },
  "folding": {
    "prefix": "folding",
    "body": [
      "{% folding blue, 效果预览 %}",
      "$1",
      "{% endfolding %}"
    ],
    "description": "folding"
  },
  "tip": {
    "prefix": "tip",
    "body": [
      "{% tip info faa-horizontal animated %}",
      "$1",
      "{% endtip %}"
    ],
    "description": "tip"
  },
  "red": {
    "prefix": "red",
    "body": [
      "{% span red, $1 %}"
    ],
    "description": "red"
  }
}