1.打开工具网站
https://snippet-generator.app/
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9495a4688d824f0293f14d512c838bd8.png)
2.输入你想自定义的代码片段
这里使用Vue3 + setup语法 + ts + less 作为演示
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a9ba86a8affc418db740871a2b0ca0b0.png)
3.将目标字符串使用${1:xxx}替换
方便我们以后统一修改,xxx只是一个占位
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2b7886aeafad4d69b44b11af35f1202c.png)
4.复制右边生成的代码,写入vscode设置
回到vscode 文件 -> 首选项 -> 用户代码片段 -> 新建用户代码片段 -> 添加片段名 -> 粘贴刚刚复制好的代码
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/db69ddddd85f42698aff947641ea1034.png)
新建代码片段
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/de7afa5b5a8045efbdb9385953390dfc.png)
5.使用
这时候只要在文件中输入刚刚的代码片段简写,就可以得到我们想要的代码片段了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/61f0d19e7a9c434b8689f3d167187fe0.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6de512fb0a1f42b68661fc338f8a55d5.png)