在写博客的时候，觉得如果每一篇博客都要写头顶上的title,date…. 等信息的话会很繁琐,想到vscode 有自定义的代码缩写功能，在网上找了一下决定记录一下。

作用

  • 快速构建一些繁琐且具有一定常用性的语句

自定义代码片段

打开文件->首选项->配置用户代码片段(点击)

图示

打开代码片段

选择Markdwon.json 或者 搜索 Markdwon.json
或者选择新建全局代码片段文件(最好选择Markdwon.json)

图示

打开代码片段

代码示意
scope字段中填写以逗号分隔的作用域 Id，如果 scope 字段为空或根本没有设置，那么将适用于所有语言。(如果选择的是Markdown.json的话不用写这个)
prefix是用于触发代码片段的一段文字，当你输入这个文字的时候，你将可以展开这个代码片段的内容并将其插入。
body你可以使用 $1 $2 来作为按下 Tab 时将切换的键盘焦点区域，$0 是插入完成后最终光标所在的位置。你也可以使用 ${1:label} 或 ${2:another} 这样的方式来增加占位符，同样 Id 的占位符将会自动关联起来。
description代码解释，没多少用，但是写着方便以后查看
代码与图示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "blog header info": {
        "prefix": "blog",
        "body": [
            "---",
            "title: \"${1:在此处添加标题}\"",
            "date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} ",
            "updated: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
            "copyright_author: Star ",
            "copyright_url:  ",
            "description: ${2:笔记描述}",
            "categories: ${3|后端笔记,前端笔记,SQL笔记,工具笔记,算法笔记,计算机笔记,其他笔记|}",
            "tags: ${4|JAVA,Mysql,Springboot,Linux,计算机基础,算法|}",

            "---",
            "",
            "${0:在此处编辑  的博客摘要}",
            "",
        ],
        "description": "markdown 头部信息模版"
    }
}

代码解释图

打开Markdown自定义补全功能

文件->首选项->设置->(右上角)打开设置，将下面这段设置写入setting.json文件

自定义补全代码与步骤示图
1
2
3
"[markdown]":  {
"editor.quickSuggestions": true
}

图示1

图示2

关于代码片段编写的更多细节

关于文件名称

在阅读前面的博客内容时，你可能注意到了：添加全局代码片段的时候，文件扩展名为 .code-snippets，例如 blog.code-snippets；添加语言特定的代码片段的时候，扩展名为 .json，如 markdown.json。这个规则无论在全局还是在工作区，都是一样适用的。

光标停留点（Tabstop）

光标停留点

使用 $1 $2 这些可以作为按下 Tab 键时的光标停留位置，而 $0 无论出现在代码片段的哪个地方，都会是最后一个光标位置。

占位符

占位符

${1:占位符 Id} 可以表示一个占位符。当你插入此代码片段的时候，会出现 占位符 Id 字样，然后光标会选中这几个字以便你进行修改。

占位符可以嵌套，例如 ${1:walterlv 的 ${2:嵌套占位符}}。这时，光标会首先选中所有的文字，随后按下 Tab 之后选中后面那一部分。

在前面那个比较复杂的博客代码片段中，${1:在此处添加标题} 就是一个占位符，而 ${0:在此处编辑 blog.walterlv.com 的博客摘要} 就是光标的最终停留点。

下拉选项

下拉选项

使用 ${1|选项 1,选项 2,选项 3|} 可以创建三个选项的下拉框。

在前面的博客代码片段中，${2|dotnet,csharp,uwp|} 就是一个下拉选框，帮助我选择常用的一些博客类别。

变量

变量

使用 $变量名 或者 ${变量名:变量的默认值} 可以创建变量。

在 Visual Studio Code 中，你有这些变量可以使用：

-TM_SELECTED_TEXT - 在插入代码片段的时刻选中的文本 -TM_CURRENT_LINE - 在插入代码片段的时刻光标所在的行 -TM_CURRENT_WORD - 在插入代码片段的时刻光标所在的词 -TM_LINE_INDEX - 在插入代码片段的时刻的行号（0 为首行） -TM_LINE_NUMBER - 当前文档的总行数 -TM_FILENAME - 当前文档的文件名称 -TM_FILENAME_BASE - 当前文档不含扩展名的名称 -TM_DIRECTORY - 当前文档所在的文件夹 -TM_FILEPATH - 当前文档的完全路径 -CLIPBOARD - 剪贴板中的内容 -CURRENT_YEAR - 年 -CURRENT_YEAR_SHORT - 两位数字显示的年 -CURRENT_MONTH - 月，如 02 -CURRENT_MONTH_NAME - 月的英文名称，如 July -CURRENT_MONTH_NAME_SHORT - 月的英文缩写，如 Jul -CURRENT_DATE - 日 -CURRENT_DAY_NAME - 星期的英文名称，如 Monday -CURRENT_DAY_NAME_SHORT - 星期的英文缩写，如 Mon -CURRENT_HOUR - 24 小时制的时 -CURRENT_MINUTE - 分 -CURRENT_SECOND - 秒

所以在上面比较复杂的博客模板中，我们可以直接插入当前的时间 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} +0800。