Todo Tree 插件可实现语法级 Todo 树视图,支持多语言、实时扫描、点击跳转、自定义标记及高亮,且零配置即可用,远超 VSCode 内置搜索与其它轻量插件。

VSCode 本身不内置 Todo 树视图或语法级高亮,但通过 Todo Tree 插件可一键实现——它不是简单地搜索 // TODO,而是真正解析注释结构、支持多语言、可跳转、可过滤,且几乎零配置就能用。
为什么选 Todo Tree 而不是内置搜索或其它插件
VSCode 原生的全局搜索(Ctrl+Shift+F)能搜出 TODO,但无法常驻侧边栏、不能分类折叠、不支持点击跳转到行、也不识别 FIXME 或自定义标记。而 Todo Tree 插件直接在侧边栏提供树形结构,实时响应文件变更,且默认就识别 TODO、FIXME、BUG 等常见标记。
- 它基于 VSCode 的
TextDocumentAPI 实时扫描,比正则全局搜索更准、更轻量 - 不依赖
eslint或prettier等外部工具,开箱即用 - 支持所有主流语言(包括
.vue、.astro、.tsx中的注释块) - 如果项目里混用
// TODO和/* TODO */,它都能捕获,而很多轻量插件只认单行
安装与基础配置:改几个 key 就生效
在扩展市场搜 Todo Tree(作者是 Gruntfuggly),安装后无需重启。默认已启用,但建议微调以下三项:
- 打开设置(
Ctrl+,),搜todo-tree.tree.showScanModeButton→ 设为true,方便手动触发重扫 - 搜
todo-tree.general.tags→ 可追加自定义标记,例如:["TODO", "FIXME", "HACK", "NOTE"] - 搜
todo-tree.highlights.defaultHighlight→ 修改foreground或background来控制高亮色(如设"#ff9500"让 TODO 更醒目)
注意:todo-tree.highlights.customHighlight 是对象,若想让 FIXME 显示红色,需写成:{"FIXME": {"foreground": "#ff3b30"}},不是数组。
如何让 Todo Tree 识别非注释区域的标记(比如 Markdown 或 JSON)
默认情况下,Todo Tree 只扫描注释(//、/* */、# 等),但你可能在 README.md 里写 [ ] TODO: 改文档,或在 package.json 的 scripts 字段里留备注。这时要改两个配置:
- 设置
todo-tree.regex.regex:替换为更宽泛的正则,例如"(//|#|不识别?确保todo-tree.general.supportHtmlComments是true(默认就是)
最隐蔽的坑是:某些语言扩展(比如 Prettier)会在保存时自动删空行或格式化注释,导致 Todo 被“意外抹掉”——建议把 todo-tree 加入 editor.formatOnSaveExclude 白名单。










