vscode 自动生成文档的关键在于插件协同而非单点选择:documentthis负责代码级jsdoc生成(需匹配语言模式、紧贴声明、处理ts限制),markdown all in one负责将jsdoc转为可交付markdown/pdf(依赖typedoc等工具链),volar确保vue项目类型信息完整,缺任一环则文档准确率下降。

VSCode 里靠插件自动生成文档,不是“有没有用”的问题,而是“选哪个、怎么配、哪里会翻车”的问题。DocumentThis 是最直接解耦代码与注释的方案,但只管单个函数/类;Markdown All in One 才是真正把整个项目文档流跑通的主力——它不生成代码注释,但能把所有 JSDoc 提取出来、转成可读的 Markdown 页面,再导出 PDF。两者不是替代关系,是前后端协作链路里的不同环节。
DocumentThis 怎么让 /** + Tab 真正生效
很多人装完 DocumentThis,敲 /** 按 Tab 没反应,第一反应是插件坏了。其实八成是语言模式或作用域没对上:
- 确认当前文件语言模式是
javascript、typescript或python(右下角状态栏看),不是plaintext或html -
/**必须紧贴在函数/类/变量声明的**正上方一行**,中间不能空行 - TypeScript 项目里如果用了
declare或namespace包裹,DocumentThis 可能无法解析签名,得手动补全@param和@returns - 插件默认不处理箭头函数的隐式返回类型,
const fn = () => 42生成的注释里@returns是{any},得自己改成{number}
Markdown All in One 怎么把 JSDoc 变成可交付文档
DocumentThis 写出来的 /** ... */ 是原料,Markdown All in One 是加工厂。它本身不扫描源码,但配合命令行工具(比如 typedoc)或插件联动,就能把注释抽出来生成文档页:
- 先确保项目里有
typedoc.json配置,指定entryPoints和out目录 - 在 VSCode 终端运行
npx typedoc,输出 HTML 文档到docs/ - 打开生成的
index.html,用 Markdown All in One 的Markdown: Export to HTML命令另存为离线版(保留高亮和跳转) - 如果只想导出某几个 API 的说明,可以在 Markdown 文件里用
```ts块粘贴 JSDoc 注释,再用插件的Markdown: Create Table of Contents自动加锚点链接
Vue 项目里 vue snippet 不触发?别怪 Volar
Vue 单文件组件里想输 vue 然后按 Tab 插入模板骨架,结果没反应——这问题跟 DocumentThis 无关,但属于“自动生成文档”流程中常卡住的一环:
- 检查右下角语言模式是不是
Vue,不是HTML或Plain Text;如果不是,点击切换,或用快捷键Ctrl+K M手动设为Vue - 自定义 snippet 必须放在
vue.code-snippets文件里,且含"scope": "vue"字段,写成"scope": "html"就永远不触发 -
<script setup></script>模板里如果写了defineProps,Volar 要求 props 类型必须显式声明(defineProps()),否则类型推导失败,DocumentThis 也拿不到参数信息 - 项目根目录缺
tsconfig.json或volar.config.json,Volar 会降级为语法高亮模式,JSDoc 解析能力直接归零
真正难的不是生成文档,是让不同类型的信息(代码注释、API 列表、使用示例、变更日志)在同一个文档体系里保持同步。DocumentThis 负责源头,Markdown All in One 负责组装,而 Volar 和 Typedoc 这些才是让类型信息不丢失的底层支撑——漏掉任意一环,生成的文档就只是好看,不准确。











