VSCode自定义代码片段需创建JSON配置文件，设prefix触发、body定义内容（推荐数组格式）、description说明；保存后重载窗口生效；.ts文件需在typescript.json中单独配置；支持$TM_FILENAME_BASE等预定义变量。
如何在 VSCode 中创建自定义代码片段
VSCode 的代码片段（snippets）本质是 JSON 配置，存放在特定路径下，触发靠 prefix 字段匹配。不是写完就生效——必须重启编辑器或重载窗口，否则新片段不会出现在补全列表中。
实操建议：
- 打开命令面板（
Ctrl+Shift+P或Cmd+Shift+P），输入并选择Preferences: Configure User Snippets - 选
New Global Snippets file...创建全局片段，或选某语言（如javascript.json）做语言专属片段 - 按格式填写
prefix、body、description；body中用$1、$2定义光标停靠点，$0是最终退出位置 - 保存后，任意该语言文件中输入
prefix再按Tab即可展开
为什么 JavaScript 片段在 .ts 文件里不生效
因为 VSCode 默认按文件后缀关联语言模式，.ts 文件使用 typescript 语言模式，而你可能只配置了 javascript.json。片段不会跨语言自动继承。
解决方式：
- 在
typescript.json中单独定义相同片段（推荐，语义准确） - 或在
javascript.json中添加"scope": "typescript"字段（不推荐，易混淆） - 检查当前文件右下角语言标识是否为
TypeScript；若显示错误，先用命令Change Language Mode确认
如何让片段支持动态插入当前文件名或日期
VSCode 原生支持变量插值，但仅限于预定义变量，不支持执行 JS 表达式。常见可用变量有：$TM_FILENAME_BASE（不含扩展名的文件名）、$CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE。
示例（React 组件模板）：
{
"React Component": {
"prefix": "rc",
"body": [
"import React from 'react';",
"",
"export default function $TM_FILENAME_BASE() {",
" return $1;",
"}",
"",
"export const $TM_FILENAME_BASE = $TM_FILENAME_BASE;"
],
"description": "Create a basic React component"
}
}
注意：$TM_FILENAME_BASE 在新建未保存文件中为空字符串，此时需先保存（Ctrl+S）再触发片段，否则会生成 function () 这类语法错误。
片段中换行和缩进为何总是错乱
根本原因是 JSON 字符串内不能直接写真实换行，所有 body 必须是字符串数组或单行字符串。数组形式更可控，每项对应一行，缩进由你手动控制；若用单行字符串，则需显式写 \n 和空格，极易出错。
避坑要点：
- 始终用数组形式写
body，避免拼接\n - 数组每项开头不要加多余空格——VSCode 会以第一行的缩进为基准，自动对齐后续行
- 如果希望展开后光标停在某缩进层级，用
$1时确保它所在行的空格数与预期一致
复杂逻辑或需条件判断的场景，片段无能为力，得换用插件（如 Text Power Tools）或脚本生成器。别硬塞进 snippet。
