前言

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

配置 settings.json

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

1
2
3
"[markdown]": {
    "editor.quickSuggestions": true
}

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

配置 markdown.json

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

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

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

snippet generator

https://snippet-generator.app/

实际使用方法

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

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

下面贴出我个人的markdown.json文件供大家参考使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  "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"
  }
}