vscode代码片段是通过触发词快速插入代码模板的功能，支持自定义变量、占位符和多行结构，可为特定语言或全局配置，如设置”logd”插入调试日志，”rfc”生成react组件，提升编码效率。
在 VSCode 中，代码片段（Snippets）是一种非常实用的功能，可以帮助你快速插入常用的代码模板。通过自定义代码片段，你可以大幅提升编码效率，减少重复劳动。
什么是 VSCode 代码片段？
代码片段是一段可重用的代码模板，可以通过简短的触发词快速插入到编辑器中。VSCode 支持为不同语言配置专属片段，比如 javaScript、html、python 等。你可以定义变量、占位符、默认值，甚至支持多行结构。
创建自定义代码片段
按照以下步骤即可创建属于自己的代码模板：
• 打开命令面板：使用快捷键 Ctrl+Shift+P（macOS 上是 Cmd+Shift+P）
• 输入并选择：Preferences: Configure User Snippets
• 选择语言范围：可以选“新建全局片段”或针对特定语言（如 vue、javascript）
• 编辑 jsON 文件：VSCode 会打开一个 .json 文件供你编写片段规则
"Log Debug Info": { "prefix": "logd", "body": [ "console.log('Debug:', $1);", "$2" ], "description": "Insert a debug log statement" }
保存后，在 JS 文件中输入 logd，就会自动提示并插入该模板，光标定位在 `$1` 处，按 Tab 可跳转到 `$2`。
片段语法说明
编写片段时，以下几个语法特别有用：
• prefix：触发关键词，比如输入 “cls” 触发类模板
• body：实际插入的代码内容，支持数组形式写多行
• $1, $2：Tab 键跳转的占位位置，$0 表示最终位置
• ${1:default}：带默认值的占位符
• $TM_FILENAME：当前文件名，可用于生成模块名或组件名
• ${CURRENT_YEAR}：自动插入当前年份，适合写注释头部
举个复杂点的例子——React 函数组件模板：
"React Functional Component": { "prefix": "rfc", "body": [ "import React from 'react';", "", "const ${1:Component} = () => {", " return (", " <div>", " ${2:Content}", " </div>", " );", "};", "", "export default ${1:Component};", "" ], "description": "Create a simple React functional component" }
全局片段 vs 语言片段
VSCode 允许你创建两种类型的片段：
• 语言特定片段：只在指定语言文件中生效，比如 .js、.py
• 全局片段：可在任意文件中使用，适合通用模板（如版权头、日志打印）
建议将通用模板设为全局，业务相关模板绑定到具体语言，避免干扰其他场景。
基本上就这些。合理配置代码片段后，日常开发中的重复代码输入会大大减少，写起来更流畅。