VSCode原生Snippets可配置轻量JS注释模板,koroFileHeader支持自动更新,Document This提供类型推断;三者应职责分离,避免混用导致冲突。

用用户代码片段(Snippets)配置 JS 注释模板
VSCode 原生支持通过 javascript.json 用户代码片段实现轻量、稳定、无依赖的 JS 注释模板,比插件更可控,也避免了插件更新导致行为突变的问题。关键在于模板写对、变量用准、触发及时。
-
prefix要简短易记,比如fn用于函数注释、hdr用于文件头,输入后按Tab即可展开 -
body中每行必须是字符串数组元素,换行靠新增数组项,不能用\n - 动态变量如
${CURRENT_YEAR}、${TM_FILENAME_BASE}、${TM_CURRENT_LINE}会实时计算,但${TM_CURRENT_LINE}在函数定义行上方触发时可能为空,建议改用光标位置占位符${1:funcName} - 作者名需提前在 VSCode 设置中配置
editor.userAuthor(或通过settings.json手动加"editor.userAuthor": "Your Name"),否则${TM_AUTHOR}不生效
用 koroFileHeader 插件生成带自动更新的函数/文件注释
如果你需要「保存即更新最后编辑时间」或「跨语言统一模板」,koroFileHeader 是目前最成熟的方案。它不依赖语言服务,纯文本解析,对 JS/TS/Python/Go 等都稳定有效。
- 快捷键:文件头用
Ctrl+Alt+I(Win/Linux)或Cmd+Alt+I(macOS);函数注释用Ctrl+Alt+T/Cmd+Alt+T - 模板变量用
$date$、$author$、$description$,不是${...}格式,写错就无法替换 - 启用自动更新需在
settings.json中设:"fileheader.configObj": { "autoAdd": true, "autoUpdate": true }—— 注意不是autoupdate(常见拼写错误) - 函数注释默认不识别参数类型,若需
@param {string} name这类标注,得配合Document This或手动补全,koroFileHeader本身不解析 JS 类型
Document This 插件生成带类型推断的 JSDoc 注释
当你写的是带明确签名的函数(尤其有 TypeScript 类型或 JSDoc 已有部分标注),Document This 能基于 AST 推导 @param 和 @returns 类型,比纯模板更智能。
- 触发方式不止快捷键:
/**+Enter、右键菜单、命令面板输入Document This都可 - 默认不填
@description,容易留空;可在设置中开启"document-this.insertDescription": true强制生成 - 对箭头函数、匿名函数、方法简写(如
method() {})支持不稳定,光标必须严格落在函数名上,而非括号或花括号内 - 若项目没配
jsconfig.json或tsconfig.json,类型推断会退化为{any},此时不如用 Snippets 手动写准类型
为什么不要混用多个注释插件
多个插件监听同一事件(如 /** 回车)会导致冲突:一个插件生成了模板,另一个又覆盖重写,或者快捷键被劫持,最终注释格式错乱、光标跳转异常、甚至卡死。
- 推荐组合:Snippets(基础模板) +
koroFileHeader(文件/函数头自动更新)——二者职责分明,无重叠逻辑 - 禁用冲突项:装了
Document This后,关掉 VSCode 内置的jsdoc.autoAppendClosingTag,否则末尾*/可能被重复添加 - 真实坑点:某些团队规范要求
@since字段带版本号,但所有插件都不支持自动读取package.json的version,只能靠 Snippets + 自定义脚本或 CI 检查兜底


















