vsCode设置代码片段

打开设置

• 方法一： 通过界面-设置面板->选择用户代码片段

• 方法二： 使用快捷键 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}}。
变量

1. 文档相关：

• 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": "新建箭头函数"
}

代码片段生成器：https://snippet-generator.app