一、起步
1.如何设置
Windows系统: 文件 > 首选项 > 用户代码片段
Mac系统: Code > 首选项 > 用户片段
2. 选择已有代码片段或创建代码片段(可以对现有的进行修改,也可以新建代码片段)
代码片段分两种:
全局代码片段(每种语言环境下都能触发代码块)。
对应语言的局部代码片段(只能在对应语言环境下才能触发),新建全局代码片段会在 snippets 目录下生成 .code-snippets 为后缀的配置文件,而新建对应语言的代码片段会生成 对应语言 + .json 的配置文件。
下图是创建代码块的开始界面:
如:我们新建一个叫 my-snippets 的代码片段文件
新建完之后会出现默认的示例,看起来是个类似 json 的配置文件。
接下来我们可以在开心的在新建的 my-snippets.code-snippets 文件中设置我们的代码片段了。
二、Snippet 语法
然而创建后的默认示例你可能会懵逼,这,都是些啥?
接下来就用这个默认示例讲解一下 VSCode 的 Snippet 语法。
// Example:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
复制代码
Example 下面的 Print to console 对应代码片段名称(触发代码片段的时候会展示匹配到的代码片段名称)。
prefix 对应触发代码片段的字符。
body 对应代码片段内容,可以是字符串,也可以为数组,若为数组每个元素都做为单独的一行插入。body 的内容支持js的转义字符,如 \n\r 等,我个人不建议用 \n ,可另起一行给数组多插入一项,不然一行太多的话不容易观察代码块的格式。
description 对应代码片段描述。
1.占位符 $
log 方法中 $ 后面紧跟数字可指定代码片段触发落入编辑器之后的光标位置,光标位置按照从小到大排序。 log 方法中当你输入 log + TAB 之后光标会默认落到 log() 的括号中($1 的位置),如果此时没有手动移动光标位置,再次按 TAB 则光标会落到 console.log() 的第二行( $2 的位置),当然,你也可以设置 $3、$4 ... 等等。
需要注意的是:
复制代码
$0 用于设置最终光标的位置,设置了 $0 之后,再往后设置其他占位符则不会生效, $0 终止了 TAB键 的光标跳转操作。
2.占位内容的可选项
"方法注释": {
"prefix": "zs-Function",
"body": [
"/**",
" * @description description...",
" * @param { ${1|Boolean,Number,String,Object,Array,*|} } name description...",
" * @return { ${2|Boolean,Number,String,Object,Array,*|} } description...",
" */",
"$0"
],
"description": "添加方法注释"
}
复制代码
上面是一个简单的方法注释代码块,占位符默认不带可选项,如果要设置占位内容的可选项,写法为 ${1|a,b,c},括号中的 1 对应的是按 TAB 之后的光标落点顺序, abc 为可选的项,用逗号隔开。所以上面的代码在输入 zs + TAB 后第一个光标会落在 param name... {} 的大括号中($1 的位置),如下图可以看到设置的可选项。
选择了参数类型之后,再次按 TAB , 光标会自动落到返回参数类型处($2 的位置)并弹出可选项。如下所示:
选择了第二个选项之后,再次按 TAB ,光标自动落到我们配置的 $0 处,也就是 */ 的下一行:
需要注意的是:
复制代码
如果可选择内容只有一个值的话可以写成 ${1:default} 的格式。
占位内容支持嵌套,比如 ${1:another ${2:placeholder}}。
3.变量
使用 $name 或者 ${name:default} 可以插入变量的值。如果未设置变量,则会插入其默认值或空字符串。当变量未知(未定义其名称)时,会将插入的变量名称转换为占位符。
VSCode 中可以使用以下变量:
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当前文档的完整文件路径
CLIPBOARD剪贴板的内容
WORKSPACE_NAME已打开的工作空间或文件夹的名称
2)当前日期和时间:
变量变量含义CURRENT_YEAR当前年份
CURRENT_YEAR_SHORT当前年份的最后两位数
CURRENT_MONTH月份为两位数(例如'02')
CURRENT_MONTH_NAME月份的全名(例如'June')(中文语言对应六月)
CURRENT_MONTH_NAME_SHORT月份的简称(例如'Jun')(中文语言对应是6月)
CURRENT_DATE这个月的哪一天
CURRENT_DAY_NAME当天是星期几(例如'星期一')
CURRENT_DAY_NAME_SHORT当天是星期几的简称(例如'Mon')(中文对应周一)
CURRENT_HOUR24小时时钟格式的当前小时
CURRENT_MINUTE当前分
CURRENT_SECOND当前秒
3)要插入行或块注释,请遵循当前语言:
变量变量含义BLOCK_COMMENT_START输出:PHP /*或HTML格式
LINE_COMMENT输出:PHP //或HTML格式
举个栗子:
下面的代码块是常用的文件顶部添加作者和时间的块注释,其中用到了年(CURRENT_YEAR)月(CURRENT_MONTH)日($CURRENT_DATE)的系统变量。
"作者和时间注释": {
"prefix": "zs-Author & Time",
"body": [
"/**",
" * Created by preference on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",
" */",
"$0"
],
"description": "添加作者和时间注释"
}
复制代码
再举个栗子:
下面的代码块是新建 .Vue 文件的模板代码块,其中用到了当前文档没有扩展名的文件名(TM_FILENAME_BASE),默认把文件名填入 name 和 class 中。
"Vue模板": {
"prefix": "vue-template",
"body": [
"",
" ",
" $1",
" ",
"\n",
"
"export default {",
" name: '$TM_FILENAME_BASE',",
" data() {",
" return {\n",
" }",
" },",
" components: {},",
" watch: {},",
" mounted() {},",
" methods: {}",
"}",
"\n",
"
"",
"$0"
],
"description": "Vue模板"
}
复制代码
三、结语
通过占位符和变量组合,各位童鞋可以充分发挥自己的想象力去设置自己喜欢的、常用的代码片段,提高开发效率和开发体验,希望这篇文章能给大家带来帮助,如有错误可在评论者提出。