vsCode设置代码片段

最新推荐文章于 2025-03-28 18:08:08 发布

Debug_info

最新推荐文章于 2025-03-28 18:08:08 发布

阅读量1.6k

点赞数 29

文章标签： vscode 编辑器

本文链接：https://blog.youkuaiyun.com/bxqmz/article/details/137257183

版权

本文介绍了如何在VisualStudioCode中通过界面或快捷键创建和管理代码片段，如Printtoconsole代码片段的详细配置，以及如何使用`defn`快捷方式定义箭头函数。还提到了片段语法中的占位符和特殊结构，以及与之相关的文档和功能插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开设置

方法一：通过界面-设置面板->选择用户代码片段
方法二：使用快捷键 ctrl + alt + p

在这里插入图片描述

选择创建代码片段
1.可以直接打开现有代码片段
2. 可以选择创建全局代码片段
3. 可以选择创建当前文件夹的代码片段
新建完成的代码片段有默认参考例子,打开注释可以测试
在这里插入图片描述
输入log ,可以看到第一个是我们自己添加的代码片段

snippet语法

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

Print to console 代码片段名称
scope 使用的语言范围
prefix 触发当前的 snippt 片段
body 代码片段的具体内容
description 代码片段的描述

片段语法

body 片段里面可以使用特殊的结构来控制插入的光标和文字。

占位符
使用 $ 符号作为占位符，当输入代码片段的 prefix 后按 tab 键可以生成代码片段，然后再按 tab 键可以调到下一个占位符。占位符一般从 $1 开始，依次增加。

$0 用于设置最终光标的位置，设置了 $0 之后，再往后设置其他占位符则不会生效， $0 终止了 TAB键的光标跳转操作。

占位内容的可选项

"desc": {
		"scope": "javascript,typescript",
		"prefix": "desc",
		"body": [
			"/**",
			" * @Description ${1}",
			" * @Author holyer",
			" * @Date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			" * @param { ${2|Boolean,Number,String,Object,Array,*|} }",
			" * @return { ${3|Boolean,Number,String,Object,Array,*|} }",
			" */",
		],
		"description": "方法注释"
	},

上面是一个简单的方法注释代码块，占位符默认不带可选项，如果要设置占位内容的可选项，写法为 ${1|a,b,c}，括号中的 1 对应的是按 TAB 之后的光标落点顺序， abc 为可选的项，用逗号隔开。所以上面的代码在输入 desc + TAB 后第一个光标会落在 param name... {} 的大括号中（$1 的位置），如下图可以看到设置的可选项。
在这里插入图片描述

选择了参数类型之后，再次按 TAB , 光标会自动落到返回参数类型处（$2 的位置）并弹出可选项。

注意：

如果可选择内容只有一个值的话可以写成 ${1:default} 的格式。
占位内容支持嵌套，比如 ${1:another ${2:placeholder}}。
变量

文档相关：

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

2. 日期和时间相关：

CURRENT_YEAR 本年度
CURRENT_YEAR_SHORT 当前年份的最后两位数字
CURRENT_MONTH 月份为两位数（例如“02”）
CURRENT_MONTH_NAME 月份的全名（例如“七月”）
CURRENT_MONTH_NAME_SHORT 月份的简称（例如“Jul”）
CURRENT_DATE 一个月中的哪一天
CURRENT_DAY_NAME 日期名称（例如“星期一”）
CURRENT_DAY_NAME_SHORT 一天的简称（例如“星期一”）
CURRENT_HOUR 24 小时制的当前小时
CURRENT_MINUTE 当前分钟
CURRENT_SECOND 当前秒
CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数

3. 插入随机值：

RANDOM 6 位随机 Base-10 数字
RANDOM_HEX 6 位随机 Base-16 数字
UUID 版本 4 UUID

4. 插入注释相关：

BLOCK_COMMENT_START示例输出：PHP/*或 HTML<!–
BLOCK_COMMENT_END示例输出：PHP*/或 HTML–>
LINE_COMMENT 示例输出：在 PHP 中 //

个人片段

方法注释

"desc": {
		"scope": "javascript,typescript",
		"prefix": "desc",
		"body": [
			"/**",
			" * @Description ${1}",
			" * @Author holyer",
			" * @Date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			" * @param { ${2|Boolean,Number,String,Object,Array,*|} }",
			" * @return { ${3|Boolean,Number,String,Object,Array,*|} }",
			" */",
		],
		"description": "方法注释"
	},

定义箭头函数

"defn": {
    "scope": "javascript,typescript",
    "prefix": "defn",
    "body": [
        "const $1 = () => {",
        "$2",
        "}",
    ],
    "description": "新建箭头函数"
}