使用 vscode 自定义代码片段可快速生成常用代码结构。1. 打开“用户代码片段”设置界面，通过菜单或快捷键进入配置。2. 选择语言或新建全局片段，如 my-templates.json 以支持多类型文件。3. 编写代码片段格式，包含 prefix、body、description 字段，并使用 $1、$2 等变量标记光标位置。4. 使用时输入 prefix 并回车即可插入模板，如 htmlbase 生成 html 页面骨架，reactcomp 创建 react 组件等，从而提升开发效率。
新建代码文件时总要重复写一些基础结构，比如 HTML 页面的骨架、函数声明或者组件模板，这时候用 VSCode 的自定义代码片段功能就很方便。设置好之后，只要输入几个字母再按一下回车，就能自动补全一大段常用代码。
1. 打开“用户代码片段”设置界面
在 VSCode 中创建自定义代码片段，首先要进入设置界面。可以通过菜单栏的 “文件” > “首选项” > “用户代码片段”（或者 Mac 上是 “Code” > “Preferences” > “User Snippets”）。
也可以直接按下快捷键 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac），输入“Configure User Snippets”回车，然后选择是为某个语言创建片段，还是创建全局片段。
2. 选择语言或新建全局片段
VSCode 的代码片段是按语言区分的，比如你选择 javascript.json，那这个片段就只在 JavaScript 文件中生效。如果你想创建一个所有类型文件都能用的模板，可以选择“New Global Snippets file”。
比如，创建一个全局的 my-templates.json，这样你就可以在里面定义多个常用模板，比如 HTML 页面、React 组件、函数结构等等。
3. 编写代码片段格式
每个代码片段的结构都包含几个关键字段：
-
"prefix"：触发关键词，比如输入htmlbase就能触发 -
"body"：模板内容，支持换行和变量 -
"description"：描述，显示在提示中
一个简单的 HTML 模板示例如下：
"HTML Basic Template": {
"prefix": "htmlbase",
"body": [
"",
"",
"",
" ",
" ",
" $1 ",
"",
"",
" $2",
"",
""
],
"description": "基本的 HTML 页面结构"
}这里 $1 和 $2 是光标停留的位置，按 Tab 可以快速切换。
4. 使用和测试你的代码片段
保存好 .json 文件后，打开对应语言的文件，输入你设置的 prefix，比如 htmlbase，然后按回车或者点击提示中的选项，就能自动生成模板内容。
你可以根据自己的项目习惯，多定义几个不同的模板，比如：
-
reactcomp：React 函数组件模板 -
funclog：打印函数名的 console.log -
license：常用的版权注释
这样在日常开发中可以节省不少重复输入的时间。
基本上就这些，设置一次之后，写代码的时候就能快很多。关键是根据自己常用的内容来定制，不用太复杂也能提高效率。
