VSCode代码片段是可交互、带逻辑的代码生成器，支持变量展开、光标定位与上下文联动；如用$1/$2实现React组件名同步补全，用$TM_FILENAME_BASE自动获取文件名，需注意语言模式（如typescriptreact）、变量作用域及配置层级优先级。
VSCode 的代码片段（Snippets）不是“写一次、到处粘贴”的快捷方式，而是能带逻辑、可交互、与上下文联动的代码生成器——用对了，比录屏宏还精准；用错了，反而卡在 tab 键跳不下去。
怎么创建一个能自动补全变量名的 JavaScript 片段
很多人以为片段只是静态文本替换，其实它支持变量展开和光标定位。比如写 React 函数组件时，总要重复 const ComponentName = () => { return (…); };，但组件名每次不同。
- 打开命令面板（
Ctrl+Shift+P），输入Preferences: Configure User Snippets，选javascript.json - 添加如下片段：
{ "React Functional Component": { "prefix": "rfc", "body": [ "const $1 = () => {", " return ($2);", "};", "", "export default $1;" ], "description": "Create a React functional component" } } -
$1是首个焦点位置，输入后按Tab跳到$2；多个$1会同步更新，适合命名一致性场景 - 注意：不要用
${1:default}给初始值，除非你确定每次都要覆盖——它会阻塞光标移动，新手常在这里卡住
为什么 TypeScript 片段里 className 总被自动改成 class
这是 VSCode 默认 HTML 片段和 TSX 语言模式冲突导致的。TSX 文件中敲 div + Tab，如果触发的是 HTML 片段而非 JSX 片段，就会套用 HTML 规范。
- 确认当前文件语言模式是
typescriptreact（右下角状态栏点击可切换），不是typescript或javascriptreact - 为 TSX 单独建片段：运行
Configure User Snippets→ 选typescriptreact.json - 避免复用 HTML 片段中的
class字段，TSX 片段里一律写className，例如："div with className": { "prefix": "divc", "body": ["<div className=\"$1\">$2</div>"] } - 插件如
Auto Rename Tag可能干扰片段行为，临时禁用可验证是否为冲突源
如何让片段读取当前文件名作为默认组件名
手动输名字太慢，又不想硬编码，得用 VSCode 内置变量。但不是所有变量都可用在所有位置——比如 $TM_FILENAME_BASE 在片段体里生效，但在 prefix 字段里无效。
- 支持的常用变量：
$TM_FILENAME_BASE（不含扩展名）、$TM_LINE_INDEX（当前行号）、$CLIPBOARD - 示例：生成以文件名命名的 Vue 3
setup组件"Vue setup by filename": { "prefix": "vsetup", "body": [ "<script setup lang=\"ts\">", "defineProps<{", " $1: $2", "}>()", "</script>", "", "<template>", " <div class=\"$TM_FILENAME_BASE\">$0</div>", "</template>" ] } -
$0是最终光标位置，不是编号顺序里的“第零个”，它不可跳过，且必须唯一 - 变量不支持嵌套或运算，
${TM_FILENAME_BASE:lower}这类写法无效——VSCode 不解析大小写转换逻辑
真正难的不是写片段，而是判断该在哪一层定义：用户级片段全局生效但难维护，工作区级片段（.vscode/snippets/）能随项目走但需 Git 纳入，语言扩展自带的片段（如 ESLint 插件）优先级更高却不可见。改一个 tab 停顿时间，可能要翻三处配置。
