学习时看到授课老师一步生成所需代码,感到震惊与好奇,于是有了以下文章

首先打开VScode找到“文件”选项中“首选项“的子菜单栏选项”用户代码片段“

打开VScode--->首选项--->用户代码片段

vscode javascript 开发 vscode怎么编写javascript_json

 

在打开的下拉列表中找到需要快速插入的代码片段语言,里面包含了所有编程语言:c、c++、js等。

vscode javascript 开发 vscode怎么编写javascript_vscode_02

 

选择语言后会打开一个以.json为后缀名的文件如:javascript.json,cpp.json等。因为我要插入的是js代码,所以选择javascript

vscode javascript 开发 vscode怎么编写javascript_vscode_03

 

打开的javascript.json文件中会有一段关于插入片段代码的格式注释,如下图

vscode javascript 开发 vscode怎么编写javascript_占位符_04

意思翻译过来就是:

// 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代码片段

vscode javascript 开发 vscode怎么编写javascript_javascript_05

 

在js文件中输入add加tab键后得到

vscode javascript 开发 vscode怎么编写javascript_javascript_06

 

最后我们来看看注释中的$0,$1与$2是什么意思

$0:光标最终位置,我们仍然以add为例

当add代码段中无$0时,光标处在最终代码末尾

vscode javascript 开发 vscode怎么编写javascript_json_07

 

而当有$0时,光标处在$0所在位置

vscode javascript 开发 vscode怎么编写javascript_vscode_08

 

vscode javascript 开发 vscode怎么编写javascript_代码片段_09

而$1与$2为当前活动光标所在位置,按tab键可切换光标位置,从$1的位置跳转到$2的位置。我猜想这与优先级差不多,数越小优先级越大,$后可接任意数字。另外当一个片段代码中有$0又有$其他比0大的数 时,会出现两个光标,一个是活动光标一个是静止的光标。静止的光标属于$0,另一个则是$>0的数,当点击回车后则会便会跳转到静止的光标。

${1:label},${2:another}表示一个占位符,占位符文本会被插入并选择,以便我们更改,当有多个占位符时,可通过tab键进行选择。

我们定义hi代码片段,jack与lili为占位符,将代码段插入到js文件中

vscode javascript 开发 vscode怎么编写javascript_javascript_10

 

插入后会先选中字符串jack,可以对其进行更改,按tab键便可以跳转到下一个占位符lili

vscode javascript 开发 vscode怎么编写javascript_json_11

最后:代码片段在json文件中进行定义的,所以要遵循json语法规则