在VSCode中创建自定义代码片段需通过命令面板打开“Configure User Snippets”，选择语言或新建全局文件；触发依赖prefix匹配+Tab，且必须确保编辑器右下角语言模式正确，否则不生效。
如何在 VSCode 中创建并触发自定义代码片段
VSCode 的代码片段（snippets）本质是带占位符的模板，不是自动补全逻辑，触发依赖前缀 + Tab。关键在于 prefix 设计是否贴合你敲代码时的直觉。
操作路径：打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入「Preferences: Configure User Snippets」→ 选语言（如 javascript）或新建全局文件（global.code-snippets）。
-
prefix建议用缩写但避免冲突，比如log容易和console.log冲突，改用clog更安全 -
body中用$1、$2定义光标跳转顺序，${1:default}提供默认值，减少重复输入 - 多行内容需用数组形式，每行一个字符串，注意缩进会被原样保留，建议用空格对齐而非 Tab
为什么你写的 snippet 总是不触发？常见匹配失败原因
最常被忽略的是语言模式（language mode）不匹配。VSCode 按编辑器右下角显示的语言标识决定加载哪个 snippet 文件，哪怕文件后缀是 .js，如果状态栏显示的是 Plain Text，你的 javascript snippet 就不会生效。
- 检查右下角语言标签，点击切换为正确语言（如
JavaScript、TypeScript React） - 全局 snippet（
global.code-snippets）只在当前文件未指定语言时 fallback 使用，不要指望它覆盖所有场景 - 扩展可能覆盖内置语言模式，例如安装了
Vetur后.vue文件默认是Vue模式，需单独配vuesnippet，而非复用html或javascript - 修改 snippet 文件后无需重启，但已打开的编辑器可能缓存旧配置，可尝试关闭再重开该文件
React 函数组件 + TypeScript 的高频 snippet 示例
这类组合有固定结构，手敲冗余度高，适合封装。注意类型参数、props 解构、返回 JSX 的一致性。
{
"React FC with Props": {
"prefix": "rfc",
"body": [
"const $1 = ({ $2 }: { $2: $3 }): JSX.Element => {",
" return (",
" <$4>",
" $0",
" </$4>",
" );",
"};",
"",
"export default $1;"
],
"description": "React functional component with typed props"
}
}
-
$1是组件名，Tab 后优先跳转到这里；$0是最终光标位置，通常放在 JSX 内容区 -
$3默认填any，但实际应快速替换成具体接口，比如UserProps，所以留空比写死更灵活 - 如果项目用
Prettier，注意 snippet 中的换行和缩进风格要和保存时格式化规则兼容，否则可能被自动调整破坏结构
片段中如何安全使用变量和动态值
VSCode snippet 支持有限变量，如 $TM_FILENAME_BASE（当前文件名无后缀）、$CURRENT_YEAR，但不支持表达式或函数调用。别试图写 ${Date.now()} —— 它不会执行，只会原样输出。
- 可用变量列表见官方文档
snippet variables，常用：$CLIPBOARD、$SELECTION、$WORKSPACE_NAME -
$SELECTION在已有选中文本时特别有用，比如包裹选中内容：设置 prefix 为wrap，body 为<div>$SELECTION</div> - 需要复杂逻辑（如生成唯一 ID、时间戳格式化）请用插件（如
Insert Date String），而不是硬塞进 snippet - 变量不能嵌套，
${TM_FILENAME_BASE:lower}这类写法无效；大小写转换需靠外部工具或插件
