前言
代码片段(code snippets)是一些使用率极高的代码，开发的过程中可能会频繁使用到，如果通过设置编辑器或者IDE的Snippets自动完成代码，可以显著地提高开发的效率。
概述
代码片段（Code Snippets），指的是一些使用率很高的代码模板，可以是固定的内容（比如文件头的版权声明），或者是可以修改的预定义模板，比如for、while循环的模板。 通过Snippet，输入特定的关键词，就可以在代码段引擎的帮助下，生成预定义的模板代码，接着我们还可以通过在预定义的光标位置之间跳转，来修改补全模板，得到我们最终想要的代码。
正文
配置路经
code => 首选项 => 配置用户代码片段
生效范围
全局代码片段：代码片段在电脑中全局生效
文件夹代码片段：代码片段只在指定的文件夹中生效
生效文件：
全局：所有文件类型都生效
指定文件类型：指定文件类型才生效
字段解释：
scope: 代码片段生效的范围(例如：配置为"javascript,typescript"，不仅在.js或.ts中生效，在.vue的script代码中也会生效)
prefix: 触发代码片段的关键字
body: 代码片段内容，可以是字符串或者数组（每个元素一行）
description: 代码片段描述
配置示例
{
"log": {
"prefix": "mcl",
"body": [
"console.log('$1');",
"$2"
],
"description": "自定义打印log"
},
"create page index.ts": {
"prefix": "index",
"scope": "javascript,typescript",
"body": [
"import { createApp } from 'vue';",
"import Cupshe, { Lazyload } from 'cupshe-element';",
"import 'cupshe-element/lib/index.css';",
"import App from './app.vue';",
"import langPlugin from '@/plugins/langPlugin';",
"import 'windi.css';",
"function bootstrap (id: string) {",
" const app = createApp(App)",
" .use(langPlugin)",
" .use(Cupshe)",
" .use(Lazyload)",
" .mount(`#\\${id}`);",
"}",
"bootstrap('$1');"
],
"description": "页面模块初始化文件index.ts初始化代码"
},
}
使用$1,$2指定光标位置。数字是访问制表符的顺序，而$0表示最终的光标位置。通过 点击tab 会根据索引切换光标位置。
使用
在 生效的项目 或 文件 中输入我们定义的关键字 mcl，会推导出我们定义的snippet
接着按下 Tab 或 Enter，文件中就会生成在 body 中声明的代码片段。并且光标位置定位在 $1 的位置
接着再次按下 Tab，光标会定位到 $2 的位置
定义索引是为了某些需要手动填写的情况，方便快速定位到每一个待填写的位置
删除
打开代码片段文件，定位到资源管理器中，然后删除物理文件
