>前言

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

>配置 settings.json

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

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

在信任的工作区编辑 markdown 文件时,才能自动补全代码

配置 markdown.json

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

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

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

snippet generator

>实际使用方法

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

用户代码片段中还有很多其他格式的文件,比如 javascript 等,使用方法也是同理

下面贴出我自己 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"
  }
}