vscode原生snippets卡顿因纯文本替换引擎无缓存、不支持异步，解析嵌套占位符时性能指数下降；改用vscode-snippet-engine预编译js模板或texteditor.edit()手动插入可提升3–5倍性能。
为什么 snippet 会卡顿？
VSCode 原生 snippets 在模板较大（比如含 50+ 行、嵌套占位符或条件逻辑）时，触发补全会明显延迟，尤其在 TypeScript 或大型 Vue/React 项目中。这不是你配置错了，而是 VSCode 的 snippet 引擎基于纯文本替换，不支持异步、不缓存解析结果，每次展开都要重新 parse 占位符树。
- 避免在
body中写超过 3 层嵌套的${1:xxx}和${2:yyy}，深度嵌套会让解析时间指数增长 - 不用
${TM_SELECTED_TEXT}做复杂判断——它在粘贴前才求值，容易阻塞 UI 线程 - 禁用所有非必要插件后再测试，确认卡顿来自 snippet 本身而非其他插件干扰
用 vscode-snippet-engine 替代原生 snippet
原生 snippet 不支持预编译、异步生成和上下文感知，而 vscode-snippet-engine 是一个轻量运行时，允许你用 JavaScript 编写可执行模板，启动时预编译成函数，展开时直接调用，性能提升 3–5 倍。
- 安装后，在
.vscode/snippets/下新建js-template.js，导出一个函数：module.exports = (ctx) => { const { fileName, languageId } = ctx; return `export default {\n name: '${fileName.replace(/\.[^.]*/, '')}',\n data() { return {} }\n};`; }; - 在
package.json的contributes.snippets中引用该文件路径，不是 JSON 格式 - 注意：
ctx只包含安全字段（fileName,languageId,selection），不能访问 workspace 或 fs
动态模板必须绕开 editor.action.insertSnippet
直接调用 editor.action.insertSnippet 命令会走完整 UI 流程，触发 layout 重排，对大模板很慢。真正高性能的做法是用 TextEditor.edit() 手动插入，并控制光标位置。
- 不要这样写：
vscode.commands.executeCommand('editor.action.insertSnippet', { snippet: 'console.log(${1:value});' }); - 应该这样写：
editor.edit(edit => { edit.insert(editor.selection.active, 'console.log('); // 插入后手动设置 cursor 到括号内 const pos = editor.selection.active.translate(0, 12); editor.selection = new vscode.Selection(pos, pos); }); - 如果需多行插入，用
edit.replace()替代多次insert()，减少编辑器重绘次数
Vue/React 模板生成的特殊陷阱
在 .vue 或 .tsx 文件中，用 snippet 插入带 JSX 或 template 结构的代码时，VSCode 语法高亮引擎会在插入后立即重解析整块区域，导致界面冻结。这不是模板问题，是语言服务器响应策略所致。
- 给 Vue 模板加
/* eslint-disable */注释头，能跳过部分 lint 触发，加快渲染 - React 函数组件模板里避免初始
useState调用带复杂默认值（如{ list: [] }），改用useState(() => ({ list: [] }))延迟计算 - 所有模板结尾加空行——VSCode 对无换行结尾的片段会额外做一次行尾规范化，引发二次解析
实际写模板时，最易被忽略的是「插入时机」：别在用户还在打字时自动触发，等 TextDocumentChangeEvent 静默 200ms 再生成；否则键盘输入和模板插入抢光标，体验比慢更糟。
