前端 【VScode】使用Snippets(用户代码片段)使Markdown文件快速生成代码

yiyao2006 · December 30, 2019 · 99 hits

  我使用 VScode 来编写我的博客文章,一般我会直接在 VScode 的资源管理器新建一个 md 文件来编写我要写的文章(包括你现在看到的这一篇),它需要一个Front-matter。 例如现在写的这个:

1
2
3
4
5
6

title: 【VScode】使用Snippets(用户代码片段)使Markdown文件快速生成代码
date: 2019-1-22 22:56:22
categories: VScode
tags: [VScode,Snippets]

  如果通过命令行hexo new [layout] <title>新建一个 md 文件,它是会自动添加的,但使用 VScode 手动新建一个 md 的时候,它就不会有,而之前我一直是在别的文章复制一份 Front-matter 到新的文章 md 里,这并不酷,我想它可以像新建的 html 文件一样,+Tab就可以快速生成 HTML 体,于是便有了这篇文章。

  我查找了很多文章,知道了 Snippets(用户代码片段)这个功能,但是这个功能在 markdown 上视乎不起作用,最终在参考文章里找到了答案,因为 VScode 版本的原因,操作起来有些许不同。

正文

打开 Snippets(用户代码片段)

路径:文件》首选项》用户代码片段

当然你也可以选择Ctrl+Shift+P,输入Snippets进入

找到 Markdown(其他语言类同)

进入编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"Front-Matter": {
"prefix": "fm",
"body": [
"---"
"title: 【${1:title1}】${2:title2}"
"date: ${3:date}"
"categories: ${4:categories}"
"tags: [${5:tags}]"
"---"
"$6"
],
"description": "Front-Matter"
}
}

prefix:定义要在文章用快捷输入的字符,相当于 html 快捷输入的!

body:要快捷生成的代码,每一行都要用””

description:快捷输入时候的提示

$:生成代码体后,光标出现的位置,先后顺序以后面的 1 2 3 决定

其他 VScode 默认就有智能提示的语言,到这一步保存,就可以正常用了,但 markdown 默认是不启动智能提示的,因此快捷生成代码片段也就用不了了。因此我们需要开启智能提示


重点:开启智能提示

路径:文件》首选项》设置,搜索[markdown]找到[markdown],在Settings.json中编辑

点击左侧的,复制到设置,将复制后到右侧的代码中的"editor.quickSuggestions": false改成"editor.quickSuggestions": true,保存,即可

此时,新建一个 md,输入fmTab即可生成

1
2
3
4
5
6

title: 【title1】title2
date: date
categories: categories
tags: [tags]

参考文章:VSCode Snippets - Markdown

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.