vscode用户代码片段的配置与使用

配置和使用

开发时有很多代码片段是重复的，如果每次用到都写一遍或者复制一遍，都会显得很麻烦。本文以 vue3 + typescript 为例，介绍一下在 vscode 中 用户代码片段 的使用。

vue3模板：

<script setup lang="ts">

</script>

<template>

</template>

<style lang="less" scoped>

</style>

上面是我写vue3项目时的基本结构，虽然没什么难度，但是每个页面都要写一遍就觉得很烦。此时可以通过点击 左下角齿轮【设置 - 配置用户代码片段】：

然后会在编辑器中间弹出一个界面：

界面分为两个部分，分割线上面是 现有代码片段，表示已经创建了相关文件，分割线下面是新代码片段，表示可以创建相关文件。

如果你没有配置过任何文件，现有代码片段中应该是没有任何项的，你现在需要新建一个代码片段。比如本文示例是vue项目，那就在 搜索框 输入vue，就会显示 vue.json ：

点击进去默认代码如下图：

这就是使用说明，新建的所有代码片段都差不多，内容是：

把你的片段放在这里。每个代码段都在一个代码段名称下定义，并具有前缀、正文和描述。
前缀是用来触发代码段的，主体将被扩展和插入。可能的变量：
$1， $2用于制表停止，$0用于最后的光标位置，${1:label}， ${2:another}用于占位符。连接具有相同id的占位符。

通过上面例子来说，Print to console 是代码片段的名称，prefix 是代码快捷键入口，通过输入 log 可以触发；body 是主体内容，其中$1 $2 是光标所在位置，可以通过 Tab 键切换到下一个光标位置；最后是 description ，也就是描述文本。

把例子 取消注释 ，新建一个vue文件 Test.vue ，在里面输入 log ，代码提示中就会出现刚刚定义的代码片段

那么现在就可以把vue3的模板代码添加到 vue.json 中：

"vue3 template": {
	"prefix": "vue3",
	"body": [
		"<script setup lang=\"ts\">",
		"$1",
		"</script>",
		"",
		"<template>",
		"$2",
		"</template>",
		"",
		"<style lang=\"less\" scoped>",
		"$3",
		"</style>"
	],
	"description": "vue3基础模板"
}

保存之后到vue文件中测试：

至此用户代码片段的配置和使用就结束了，下面是一些拓展和踩坑。

拓展和踩坑

vue.json 的配置只对 .vue 文件的顶级内容生效

具体场景可以参考下图：

如图右侧所示，log 代码片段已经配置，但是左侧代码提示中不存在对应代码片段，下图则是生效的：

script 标签需要配置 javascript.json

通过【设置 - 配置用户代码片段】 打开 javascript.json ，配置 clg 代码片段：

"打印到控制台": {
	"prefix": "clg",
	"body": [
		"console.log($1)",
		// "$2"
	],
	"description": "日志输出到控制台"
}

在 script 标签中输入 clg 即可触发：

script + typescript 需要配置 typescript.json

其实这个和上面应该算同一个坑，这里还是记一下吧。在基于 vue3 + ts 的写法上，我配置了 javascript.json，但是在 script标签 中始终无法生效，百度也没有类似问题（基础不牢，是我太菜了）。受到 全局代码片段 的启发，转头去搜了一下 typescript.json ，果然有这个。配置了一下，果然成功了

全局代码片段

这个其实是在上面两条之前领悟的，当时啥也不懂，一股劲死磕 script + ts 和 javascript.json，js的代码片段死活不生效，突然翻到了 新建全局代码片段文件 ：

新建后可以看到跟其他文件的代码结构有点不同：

这里是多了一行作用域的，里面包含了 javascript 以及 typescript，这条全局代码片段是能在 script 或 script + ts 中生效的：

就是这里给了我启发，然后我去搜索框找到了 typescript.json ，也就是上一条说的内容。

本文主要就讲一下代码片段的使用和本人踩的坑，代码片段模板这种东西因人而异，只要把你觉得琐碎且重复的代码抽出来就行。

希望文章能对你有所帮助