自定义 VSCode Snippets

发表于 更新于 分类于 阅读次数： 本文字数： 248 阅读时长 ≈ 1 分钟

我的博客使用 Hexo 生成，博文里面的图片地址是相对地址本地引用，使用标签插件的语法引入，如下：

1
2
# 本地图片资源，限制图片尺寸
{% asset_img image.jpg 200 400 %}

每次输入有点麻烦，可以借助 VSCode Snippets 实现更加快捷的输入。

具体使用方法如下：

  1. 打开 VSCode，点击File菜单，选择Preferences，然后点击Configure User Snippets。
  2. 输入Markdown，点击回车。
  3. 在弹出的窗口中，添加一个新的 snippets，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"img": {
  "prefix": "img",
  "body": ["{% asset_img ${0} %}"],
  "description": "img"
}，
"code": {
 "prefix": "code",  // 触发词
 "body": [  // 补全内容
   "```js",
   "$1",  // 光标停留位置
    "```"
 ],
 "description": "Add js code block"  // 注释
}
  1. 打开 VSCode，点击 File 菜单，选择 Preferences，然后点击 Settings，点击右上角分页左边的按钮 Open Settings(JSON)，输入如下文字：
1
2
3
"[markdown]": {
  "editor.quickSuggestions": true
}
  1. 保存，然后在博文里面输入img，即可自动补全。

参考文档

Snippets in Visual Studio Code
snippet-generator
VSCode 设置 Markdown 自定义补全