学习时看到授课老师一步生成所需代码,感到震惊与好奇,于是有了以下文章
首先打开VScode找到“文件”选项中“首选项“的子菜单栏选项”用户代码片段“
打开VScode--->首选项--->用户代码片段
在打开的下拉列表中找到需要快速插入的代码片段语言,里面包含了所有编程语言:c、c++、js等。
选择语言后会打开一个以.json为后缀名的文件如:javascript.json,cpp.json等。因为我要插入的是js代码,所以选择javascript
打开的javascript.json文件中会有一段关于插入片段代码的格式注释,如下图
意思翻译过来就是:
// Place your snippets for JavaScript here.
js代码片段放在这里
// Each snippet is defined under a snippet name and has a prefix, body and description.
每个代码段都在代码段名称下进行定义,并且要有前缀、正文与片段的描述
//The prefix is what is used to trigger the snippet and the body will be expanded and inserted.
前缀是用来触发片段,正文也会由此展开并插入
//Possible variables are:
可能的变量包括:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
$1,$2表示制表位,$0表示光标最终的位置,而${1:label},${2:another}表示占位符
//Placeholders with the same ids are connected.
已连接具有相同ID的占位符
"Print to console": {//代码片段的名字
"prefix": "log",//前缀,最终实现插入代码片段的简写
"body": [//真正要插入的代码片段
"console.log('$1');",
"$2"
],
"description": "Log output to console"//对代码片段的描述、解释。
}
解释完注释我们先来演示一下自带的例子,因为我们的代码片段是js语言,所以必须在文件名为.js或在<script></script>标签中才能实现。
在js文件中输入前缀:log,再按tab键。就得到我们想要的代码:console.log('');
实现完案例后再来实现下真正我需要的代码片段。要求是输入add加tab键便能得到一个add函数。第一步先在javascript.json文件中加入add代码片段
在js文件中输入add加tab键后得到
最后我们来看看注释中的$0,$1与$2是什么意思
$0:光标最终位置,我们仍然以add为例
当add代码段中无$0时,光标处在最终代码末尾
而当有$0时,光标处在$0所在位置
而$1与$2为当前活动光标所在位置,按tab键可切换光标位置,从$1的位置跳转到$2的位置。我猜想这与优先级差不多,数越小优先级越大,$后可接任意数字。另外当一个片段代码中有$0又有$其他比0大的数 时,会出现两个光标,一个是活动光标一个是静止的光标。静止的光标属于$0,另一个则是$>0的数,当点击回车后则会便会跳转到静止的光标。
${1:label},${2:another}表示一个占位符,占位符文本会被插入并选择,以便我们更改,当有多个占位符时,可通过tab键进行选择。
我们定义hi代码片段,jack与lili为占位符,将代码段插入到js文件中
插入后会先选中字符串jack,可以对其进行更改,按tab键便可以跳转到下一个占位符lili
最后:代码片段在json文件中进行定义的,所以要遵循json语法规则