学会这一技能，教你快速写代码（VScode用户代码片段）

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

首先打开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语法规则

json语法相关内容查看：AJAX学习---JSON_QM.bear!的博客-CSDN博客