学习笔记——vscode用户代码片段功能

用户代码片段

通过vscode中的用户代码片段功能，我们可以更快更容易的书写重复代码以及不常用但却有些复杂难记的代码。

1.操作

1）打开

首先点击左下角设置按钮，再点击用户代码片段。
或者直接使用ctrl + shift + p快捷键。

2）新建

根据需求，可以设置全局、css、vue-html、javascript甚至c、c++等语言的用户片段代码。生成的用户片段代码以json或者code-snippets结尾。

3）删除

右键点击想要删除的用户片段代码文件（以json或者code-snippets结尾）
Mac：点击“在finder显示”后，直接删除文件。
Window：点击“打开文件所在位置”后，直接删除文件。
或者找到文件的根目录，再使用命令窗口删除对应文件。

4）生成代码片段工具

在写用户代码片段时，需要对代码中的双引号、$、{}等符号进行转译。如果自己来写有些麻烦，可以使用下面的工具来生成。
生成代码片段工具

2.常用语法

1）制表位

使用$1,$2指定光标位置，而$0表示最终光标位置。

制表位顺序

如下面代码，在生成代码片段后，$1、$2、$0都存在
则在使用时，光标首先停在$1的位置，设置按钮尺寸。设置完后，在按键盘“tab”键，光标就会停在$2的位置，再按“tab”键，才会停在$0的位置。

"Print to btn-main": {
    
    
	"scope": "",
	"prefix": "zw-btn",
	"body": [
		"<el-button size='$1' @click='$2'>$0</el-button>"
	]
}

制表位重复

如下面代码，在生成代码片段后，$1、$1、$0，有两个重复的制表位。
则在使用时，两个$1的位置都会出现光标，并且同步更新。

"Print to btn-main": {
    
    
	"scope": "",
	"prefix": "zw-btn",
	"body": [
		"<el-button size='$1' @click='$1'>$0</el-button>"
	]
}

2）占位符

占位符是带有值的制表位，例如$1:another.占位符文本将被插入和选择，以便可以轻松更改。占位符可以嵌套，例如${1:another KaTeX parse error: Expected 'EOF', got '}' at position 16: {2:placeholder}}̲. 占位符可以有不同的选择作为…{1|one,two,three|}. 当插入片段并选择占位符时，选项将提示用户选择其中一个值。

"Print to console": {
    
    
	"prefix": "zw-log",
	"body": [
	    "console.log(${1:another})"
		"console.log(${1|one,two,three|})"
		"console.log(${1:another ${2:placeholder}})"
	],
	"description": "打印日志。"
}

3）转译

使用\（反斜杠），就可以转义代码中的$$\begin{gathered} （美元符号）、.（点符号），也可以转译代码中的双引号。在下面的代码中，使用 \\ 转义 \end{gathered}$$confirm中的$，以便片段扩展阶段不会对其进行解析。

"Print to confirm": {
    
    
	"prefix": "zw-confirm",
	"body": [
		"this.\\$confirm('是否确认删除该分组？', '提示').then(() => {$0})"
	],
	"description": "确认弹窗。"
},

3.视频讲解

视频讲解