配置和使用
开发时有很多代码片段是重复的,如果每次用到都写一遍或者复制一遍,都会显得很麻烦。本文以 vue3 + typescript 为例,介绍一下在 vscode 中 用户代码片段 的使用。
vue3模板:
<script setup lang="ts">
</script>
<template>
</template>
<style lang="less" scoped>
</style>
上面是我写vue3项目时的基本结构,虽然没什么难度,但是每个页面都要写一遍就觉得很烦。此时可以通过点击 左下角齿轮 【设置 - 配置用户代码片段】:  然后会在编辑器中间弹出一个界面:  界面分为两个部分,分割线上面是 现有代码片段 ,表示已经创建了相关文件,分割线下面是新代码片段 ,表示可以创建相关文件。
如果你没有配置过任何文件,现有代码片段 中应该是没有任何项的,你现在需要新建一个代码片段。比如本文示例是vue项目,那就在 搜索框 输入vue,就会显示 vue.json :  点击进去默认代码如下图:  这就是使用说明,新建的所有代码片段都差不多,内容是:
把你的片段放在这里。每个代码段都在一个代码段名称下定义,并具有前缀、正文和描述。 前缀是用来触发代码段的,主体将被扩展和插入。可能的变量: $1, $2用于制表停止,
0
用于最后的光标位置,
0用于最后的光标位置,
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)",
],
"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 ,也就是上一条说的内容。
本文主要就讲一下代码片段的使用和本人踩的坑,代码片段模板这种东西因人而异,只要把你觉得琐碎且重复的代码抽出来就行。
希望文章能对你有所帮助
|