Code Outline 插件需配合 jsconfig.json/tsconfig.json 文件并手动刷新大纲才能正常显示结构,否则侧边栏为空;其依赖 VSCode 语言服务提取符号,JS 项目缺配置则符号支持极弱。

Code Outline 插件怎么装、怎么用才不白装
直接装完就以为能自动显示函数类结构?大概率侧边栏一片空白。根本原因是它依赖 VSCode 内置的语言服务提取符号,而 JavaScript(尤其无类型、无 TS 配置的项目)默认符号支持很弱。
必须做两件事:jsconfig.json 或 tsconfig.json 文件不能少;插件启用后要手动触发刷新(右键大纲视图 → “Refresh”)。
- 新建
jsconfig.json放在项目根目录,内容至少包含:{ "compilerOptions": { "allowJs": true, "checkJs": false, "maxNodeModuleJsDepth": 2 } } - 确保文件语言模式是
javascript(右下角状态栏确认,不是plaintext或javascriptreact) - 如果用了 Webpack/Vite 构建,
jsconfig.json中建议加"baseUrl": "./"和"paths"映射,否则跨文件 import 的符号可能无法关联
为什么 extract function 在 JS 里有时失效或参数错乱
VSCode 内置的“提取函数”重构(选中代码 → 右键 → Extract to function)在 JS 中对作用域外变量的捕获不总是可靠,尤其涉及 this、闭包变量、或未声明的全局引用时,生成的参数列表容易漏掉依赖项。
基于三引擎设计,从微信文章、新闻和博客网页提取干净内容,支持标题作者日期元数据,多格式和批量处理。
- 常见现象:提取后函数报
ReferenceError: xxx is not defined,或参数名变成arg0、arg1而非语义化名称 - 根本原因:JS 动态作用域 + 缺少类型注解,导致语言服务无法准确推导变量来源
- 安全做法:先手动把待提取块内所有外部变量显式传入,再执行提取;或改用 TypeScript,加上 JSDoc 类型标注(如
/** @type {string} */)提升推断精度 - 别依赖自动命名:生成的函数名常为
newFunction,务必手动重命名,否则后续搜索和维护成本陡增
debug996.com 流程图工具在 VSCode 里怎么真正跑起来
装了 Code Viewer 插件,右键却没“View Flowchart”?不是插件坏了,而是当前选中内容不符合它的解析规则。
- 只支持纯 JavaScript/TypeScript 逻辑块,不识别 JSX、Vue 模板、HTML 标签或注释块
- 选中范围必须是完整可执行语句序列(比如一个 if 分支、一段 for 循环体),不能只选关键词或半截表达式
- 避免含动态 import()、eval、with 等运行时不可静态分析的语法,否则流程图会中断或空白
- 实际效果更稳的方式:复制选中代码 → 手动粘贴到 debug996.com 网页编辑区 → 点“Generate Flowchart”,绕过插件层兼容问题
Code Outline 和 ESLint / Prettier 冲突吗?怎么共存
不冲突,但顺序很重要。Outline 看的是 AST 结构,ESLint/Prettier 修改的是文本格式,二者底层互不干扰;但若格式化后代码缩进/换行剧烈变动,Outline 树节点可能短暂抖动或延迟更新。
- 关键配置:在
settings.json中确保"editor.formatOnSave": true启用,但关闭"editor.formatOnType": false(避免打字中途触发格式化干扰大纲渲染) - Outline 不受
prettier.semi或eslint-config-prettier影响,但它依赖的符号提取可能因 ESLint 的no-unused-vars规则误删变量而丢失节点 —— 这时需在 ESLint 配置中对 outline 相关字段加// eslint-disable-line no-unused-vars - 真实坑点:多人协作时,有人关了 formatOnSave,有人开了,Outline 刷新时机不一致,看起来像“有时显示有时不显示”。统一团队配置比调插件更重要

















