Visual Studio code 自带的 snippets 特性可以快速生成特定文件的模板,同时高度可定制,借助snippets可简化多种格式的文件编辑。
在启用手动配置的 snippets 之前,其实 VScode 已经提供了一些常用的 snippets 如 image 和 link。使用方式:打开 VScode,在任意一个 Markdown 文件中键入 image,按 tab
键补全,可以看到,VScode 会将刚刚输入的 image 自动替换为:
VScode自动替换image字段为markdown的图片链接格式
而且可以看到,图中已经有三个默认的操作光标,第一个是 alt 字段,匹配 img 标签中的 alt 字段,第二个是 link 字段,匹配图片链接,第三个是图片链接之后的一个光标插入位,是最后光标回落的编辑点。一般先编辑 alt 字段,然后按下 tab
键切换到 link 的光标处编辑 link,最后同样按下 tab
键切换到图片链接最后,则此次的 image snippets 使用完成。
对于 markdown 格式,启用 snippets 的方式是:在 VScode 的任意界面按下快捷键 Ctrl
+ shift
+ p
,搜索 snippets ,选中 Open User Snippets ,下拉选择 markdown 文件格式,进入 markdown.json 用户配置文件,参考注释就可以编辑自己需要在 markdown 格式文件中引用的 code snippets 了。
接下来进入 File - Preferences - Settings ,在搜索栏搜索 snippets ,可以进一步配置 snippets 的行为。
设定后重启 VScode,新建一个 markdown 格式文件,输入 postyml
(可以通过 tab
按键补全),显示效果如下图。按下 enter
键启用 snippets 。
基于 jekyll 的博客可以参考博主下面的 markdown.json 配置:
{
"post yml head file": {
"prefix": "head",
"body": [
"---",
"layout: post",
"title: $1",
"date: $2",
"description: $3",
"tags: ",
" - $4",
"---\n",
"## $5\n",
"$0"
],
"description": "post markdown file head file"
},
"link quick": {
"prefix": "ql",
"body": [
"[$2]($1) $3",
],
"description": "quick generate link"
},
"rounded template": {
"prefix": "img",
"body": [
"![]($1)*$2*\n\n$3",
],
"description": "default img template"
},
"highlight": {
"prefix": "high",
"body": [
"```${1:bash}",
"$2",
"```\n",
"$0"
],
"description": "highlight"
},
"note": {
"prefix": "note",
"body": [
"> ${1:note}",
"{: .note}\n",
"$0"
],
"description": "note without warning"
},
"key style": {
"prefix": "ks",
"body": [
"`$1`{:.key} + `$2`{:.key}"
],
"description": "按键样式"
}
}