热心市民の知识库

配置 VS Code 一键为MarkDown文档添加 Front-matter

本文理论上适用于所有平台的 Visual Studio Code

1. 安装插件

  • Markdown Preview Enhanced
  • markdownlint
  • Markdown All in One

2. 添加代码片段

文件 -> 首选项 -> 用户代码片段 -> 找到MarkDown,点击编辑 将打开的markdown.json文件替换为以下内容:

{
    "Insert a post": {
    	// Insert a post 是该代码片段的名称
    	"prefix": "head",
    	// head 是我为这个代码片段指定的自动补全提示前缀
    	"body": [
    		// body 内是代码片段的内容
    		"---",
    		"layout: post",
    		"title: $TM_FILENAME_BASE",
    		// 自动将文件名填入此处
            "slug: ${TM_FILENAME_BASE/[^0-9^a-z^A-Z^\u4e00-\u9fa5]/_/g}",
            // 自动将文件名填入此处,并替换所有不是中、英文字符、数字的字符为_
    		"date: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE",
    		// 自动生成形似 2020/01/30 20:56 的时间戳
    		"author: waleslau",
    		"excerpt: ${2:input your excerpt}",
    		"status: ${1|publish,hidden,draft|}",
    		// 下拉选项,帮助我指定文档状态(发布、隐藏、草稿)
    		"comment: true",
    		"categories: ",
    		"tags: ",
    		"---"
    	],
    	"description": "snippets for blog.oopsky.top and wiki.oopsky.top"
    }
}

3. 为代码片段添加快捷键

VS Code 默认把 Markdown 的自动补全功能给关了(因为实在是很鸡肋),需要我们为代码片段绑定快捷键 首先 ctrl+shift+p 打开命令搜索框,然后输入key,找到下面所示内容

image-20200130223315587
image-20200130223315587

点击后将会打开一个名为keybindings.json的json文档, 往里面添加如下内容

[
    {
        "key": "alt+p",
        // 指定快捷键
        "command": "editor.action.insertSnippet",
        // 动作:执行命令插入代码片段
        "when": "editorTextFocus",
        // 生效条件:文本编辑器获得焦点的期间
        "args": {
            "langId": "markdown",
            "name": "Insert a post"
            // 这里 name  填代码片段的名字
        }
    }
]

The end..

补充知识-代码片段的语法

制表符/光标停止位(Tabstops)

形似$1 $2 ,可以使用 Tab 键在这些 tabstop 之间切换,$0表示光标切换的最终位置,若同一个 tabstop 多次出现,它们将同步更新

占位符(Placeholders)

占位符是带值的制表符,像${1:foo}这样,当你切换到此占位符时,然后光标会选中占位符文本(foo)以便你进行修改。

选项(Choice)

占位符可以将选项作为值。语法是用逗号分隔选项,然后用管道符括起来,例如${1| 1,2,3 |}。当插入代码段并选择占位符时,选择将提示用户选择其中一个值

变量(Variables)

使用 $变量名 或者 ${变量名:default} 可以创建变量。

在 Visual Studio Code 中,有这些变量可以使用:

可以使用以下变量:

  • TM_SELECTED_TEXT 当前选择的文本或空字符串
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标下的单词内容或空字符串
  • TM_LINE_INDEX 基于零索引的行号
  • TM_LINE_NUMBER 基于一索引的行号
  • TM_FILENAME 当前文档的文件名
  • TM_FILENAME_BASE 当前文档的文件名,不带扩展名
  • TM_DIRECTORY 当前文件的目录
  • TM_FILEPATH 当前文档的完整文件路径
  • CLIPBOARD 剪贴板中的内容
  • WORKSPACE_NAME 打开的工作空间或文件夹的名称

要插入当前日期和时间:

  • 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_SECONDS_UNIX 自1970年1月1日时代以来的秒数(UNIX时间,或称POSIX时间)

占位符转换

将匹配项(正则表达式)替换为指定的替换格式文本

举例 输出 说明
"${TM_FILENAME/[\\.]/_/}" example-123_456-TEST.js 替换第一个._
"${TM_FILENAME/[\\.-]/_/g}" example_123_456_TEST_js 替换每个.-_
"${TM_FILENAME/(.*)/${1:/upcase}/}" EXAMPLE-123.456-TEST.JS 更改为全部大写
"${TM_FILENAME/[^0-9^a-z]//gi}" example123456TESTjs 删除非字母数字字符

更多姿势详见

Copyright © 2020 waleslau Views 正在加载今日诗词....