vsCode设置代码片段
打开设置
- 方法一：打开设置面板->选择用户的代码片段
- 方法二：按
ctrl + alt + p
选择创建代码片段
- 可以直接打开现有代码片段
- 可以选择创建全局代码片段
- 可以选择创建当前文件夹的代码片段
新建完成的代码片段有默认参考例子,打开注释可以测试
输入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_HOUR24 小时制的当前小时CURRENT_MINUTE当前分钟CURRENT_SECOND当前秒CURRENT_SECONDS_UNIX自 Unix 纪元以来的秒数
3. 插入随机值：
RANDOM6 位随机 Base-10 数字RANDOM_HEX6 位随机 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/
参考：
