1. 代码片段简介
snippet[ˈsnɪpɪt]，或者说「code snippet」，也即代码片段，指的是能够帮助输入重复代码模式，例如循环语句或自定义业务组件的模板代码。通过 snippet ，我们仅仅输入一小段字符串，就可以在代码片引擎的帮助下，生成预定义的模板代码，接着我们还可以通过在预定义的光标位置之间跳转，来快速补全模板，用户可结合自定义业务组件，快速实现高频场景的开发，从而提升开发效率，节约成本。
- VSCode 自1.57 版本开始，vscode 引入提示预览功能，再也不同担心混淆关键字和代码片段了。
2. 代码片段配置流程
首先，进入代码片设置文件，这里提供了三种方法：
通过快捷键「Ctrl + Shift + P」打开命令窗口（All Command Window），输入「snippet」，点选「首选项：配置用户代码片片段」；
按下「Alt」键切换菜单栏，通过文件 > 首选项 > 用户代码片段；
点击界面最左侧竖栏（也即活动栏）最下方的齿轮按钮，在弹出来的菜单中点选「用户代码片段」；
代码片段生成工具：99cc.vip/public/tool…
复制生成后的代码，打开vscode中的用户代码片段，将代码片段复制粘贴到打开的文件，之后便可以使用代码片段的快捷方式了。
3. 基本结构
Tabstops：制表符
用“Tabstops”可以让编辑器的指针在 snippet 内跳转。使用指定光标位置指定光标跳转的顺序，按 tab 键，光标移到下一个指定位置。相同序号的“Tabstops”被链接在一起，将会同步更新，比如下列用于生成头文件封装的 snippet 被替换到编辑器上时，光标就将同时出现在所有$1位置。
Placeholders：占位符
带有默认值的Tapstops，可嵌套，代码生成后默认值被选中，方便修改变量等。如带有“placeholder”的文本将被插入“Tabstops”位置，并在跳转时被全选，以方便修改。
Choice：可选项
“Choice”是提供可选值的“Placeholder”。其语法为一系列用逗号隔开，并最终被两个竖线圈起来的枚举值，当光标跳转到该位置的时候，用户将会被提供多个显示内容以供进行选择。
Variables：变量
例： ${CLIPBOARD} 当前剪贴板中内容。
变量参数可参考
4. 一些建议
默认情况下 snippet 在 IntelliSense 中的显示优先级并不高，而且在 IntelliSense 中选择相应 snippet 需要按「enter」键，体验感较差。 VSCode 意识到了这一点，并为我们提供了改进的方式。我们可以在 VSCode 的用户设置（「control+P」在输入框中写「user settings」后点选）中，检索代码片，然后根据提示修改代码片的相关设置。 我们可以设置在 IntelliSense 中优先显示代码片，并可以通过「TAB」补全。
修改后设置文件中会多出这两行：
"editor.snippetSuggestions": "top",
"editor.tabCompletion": true
注：v1.28 之后，editor.tabCompletion 得到了增强。现在 TAB 能补全所有前缀了，而非仅 snippet。另外，在插入非代码片的前缀 之后，可以使用 TAB 向下切换别的建议，或使用 Shift + TAB 向上切换。
- 什么样的场景，适合放到片段内？
每个人的编码习惯不同， 但是对于做业务的前端同学来说， 特别是做PC端中后台业务的同学，在CURD场景里，肯定是存在相当一部分的代码重复的，很大部分人多数情况下的处理估计都是ctrl/cmd+c/v（键盘的cv键都快磨没了），那么这些重复的部分就可以沉淀到代码片段里面，通过快捷键或指令快速实现；除了CURD里面，也可以根据个人的编码习惯，还有一些碎片化的可复用沉淀，比如说接口调用函数，自定义组件的初始化，自定义hooks初始化，日志打印等场景...只要平时开发过程中有重复性的都可以沉淀到代码片段，哪怕只有一行的那种（日志打印）。
5. 总结
以上就是本文要讲的内容，仅仅简单介绍了vscode用户代码片段简单的使用，上述内容既本人对文档内容的部分实用功能的整理与在下的榆枋之见，如有错误之处，敬请指出，谢谢！
