VSCode—用户片段功能

目录

一、概述

二、详解

三、实例

---

一、概述

项目开发中，存在很多重复代码，可将其抽取出来定义成自己的代码片段，提高编码效率，实现快捷开发。

二、详解

详解1：选择并打开代码片段文件

详解2：删除代码片段文件

代码片段文件创建后会一直保存在本地电脑中，无法直接在VSCode中执行删除操作，必须手动删除。如下图所示，开启VSCode的导航路径，根据路径找到代码片段文件所在位置，直接删除即可。

详解3：选择或创建代码片段文件

用户手动创建的代码片段分为两种类型，其一全局代码片段文件，此类文件作用于VSCode处理的所有项目，其二仅针对当前项目的代码片段文件。两种类型的文件后缀名均为.code-snippets，语法也完全相同，但文件保存位置不同，作用域不同。

详解四：代码片段的构成

代码片段均在一个片段名称下定义，一个完整的代码片段分为四部分，分别是范围、前缀、正文和描述。片段范围即作用域，如果作用域为空或省略，则该片段将应用于所有语言。前缀用来触发片段，当片段被触发时，片段正文可被扩展和插入。

详解五：片段正文的语法

1、$1: 生成代码后光标的初始位置
2、$2: 生成代码后光标的第二位置
3、$3: 生成代码后光标的第三位置, 依次类推, 可使用tab键快速切换
4、$0：生成代码后光标的最终位置, 顺序在$1,2,3......之后
5、${1:defaultValue}：生成代码后光标的初始位置, defaultValue为默认值, 可按下Tab键不编辑直接跳过
6、${2:defaultValue}：生成代码后光标的第二位置, defaultValue为默认值, 可按下Tab键不编辑直接跳过
......

如上图所示，正文body的属性值是一个数组，每一个数组元素之间均会换行。数组元素中，可以使用\n，表示换行，使用\t，表示空格。

三、实例

实例1：设置一个Vue文件的初始模板

如下图所示，从默认的代码片段列表中选择vue.json文件，在该文件中设置Vue的代码片段即可。

{  
	"snippetName": {
		"prefix": "jpf",
		"body": [
            "<template>",
            "\t<div>$1</div>",
            "</template>\n",
            "<script>",
            "export default {",
            "\tdata() {",
            "\t\treturn {\n",
            "\t\t}",
            "\t},",
            "\tmethods() {\n",
            "\t}",
            "}",
            "</script>\n",
            "<style land=\"scss\" scoped>",
            "</style>\n"
		],
		"description": "Log output to console"
	}
}