vscode自定义代码提示:用户代码片段
先来看看效果
配置好之后输入配置的代码段词头,就会有提示出现👇
入口
点击 vscode
左下角 设置⚙️
图标,点击用户代码片段
选择代码片段文件
点击用户代码片段后会展示所有语言的列表,博客使用 markdown
语法,这里选择 markdown.json
,点击进入 json
文件
正文
进入配置文件后,官方提供了一个 Example
,去掉注释后,可以看到代码长这样:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
Print to console
是代码段的名称,当没有设置description
时,会作为代码提示的标题显示prefix
顾名思义就是触发代码提示的词头,在代码区输入设置好的词头,就会有代码提示body
里的就是代码段,支持多行显示和单行显示,字符串数组形式,每个元素代表一行,也可以用\n
换行description
是代码的说明,配置后会替代代码段的名称显示
:::tip
body
里面可以使用特殊的结构来控制插入光标和文字:
:::
- 使用
$
加数字可以通过制表符控制光标移动,例如$1
、$2
、$3
...,数字越大越靠后,生成代码块后,光标会在数字最小的位置如$1
开始,最小是$1
,$0
控制的是光标最后所在位置,官方给的例子中,光标会在$1
位置,按下tab
后,光标会跳到$2
位置 - 可以在光标处添加预设的文本,例:
${1:摘要}
,生成代码块后,光标会生成并选中摘要
,可直接输入新的文本代替或者直接按tab
保留并进入下一个位置,并且可以嵌套:${1:一级标题 ${2:二级标题}}
- 可以在光标处添加可选择的文本,语法是用逗号分隔的值枚举,例:
${1|使用上下键选择分类,📒笔记,🔧工具|}
- 可以设置以下变量:
TM_SELECTED_TEXT
当前选择的文本或空字符串TM_CURRENT_LINE
当前行的内容TM_CURRENT_WORD
光标下的单词内容或空字符串TM_LINE_INDEX
基于零索引的行号TM_LINE_NUMBER
基于一索引的行号TM_FILENAME_BASE
当前文档的文件名,不带扩展名TM_FILENAME
当前文档的文件名TM_DIRECTORY
当前文档的目录TM_FILEPATH
当前文档的完整文件路径CLIPBOARD
剪贴板中的内容WORKSPACE_NAME
打开的工作空间或文件夹的名称
- 当前日期和时间
CURRENT_YEAR
本年度CURRENT_YEAR_SHORT
本年度的最后两位数字CURRENT_MONTH
以两位数字表示的月份(例如“02”)CURRENT_MONTH_NAME
月的全名(例如“十月”)CURRENT_MONTH_NAME_SHORT
该月的简称(例如“10月”)CURRENT_DATE
一个月中的某天,今天CURRENT_DAY_NAME
一天的名称(例如“周一”)CURRENT_DAY_NAME_SHORT
当前小时(24小时制)CURRENT_MINUTE
当前分钟CURRENT_SECOND
当前秒CURRENT_SECONDS_UNIX
自Unix时代以来的秒数
- 插入行或块注释
BLOCK_COMMENT_START
输出示例:用PHP/*
或 HTML<!--
BLOCK_COMMENT_END
输出示例:用PHP*/
或 HTML-->
LINE_COMMENT
输出示例:用PHP//
我的配置
// markdown.json
"博客配置": {
"prefix": "setting",
"body": [
"---",
"title: ${1:标题}",
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"categories:",
" - ${2|使用上下键选择分类,📒笔记,🔧工具|}",
"tags:",
" - ${3|使用上下键选择标签,vscode,JS,css,html,Vue,uniapp,微信小程序,React,TypeScript|}",
"---",
"",
":::tip",
"${4:输入摘要}",
":::",
"",
"<!-- more -->",
"",
"$5"
],
"description": "博客配置"
}
win 下遇到的问题
markdown文件在 windows
系统下貌似不会有代码提示,需要通过快捷键(默认 ctrl+i
)触发