Todo Tree扩展可自动扫描并高亮代码中的TODO、FIXME等注释,通过侧边栏集中管理任务,支持自定义关键词、颜色分类、分组过滤及排除指定目录,提升开发效率。

在使用 vscode 进行开发时,经常会在代码中留下 // TODO 或 // FIXME 这类注释来标记待办事项或问题。手动查找这些注释效率低,而 Todo Tree 扩展能自动扫描并高亮显示这些任务,还能在侧边栏集中管理,极大提升开发效率。
安装与启用 Todo Tree 扩展
打开 VSCode 的扩展市场(快捷键 Ctrl+Shift+X),搜索 “Todo Tree”,由 Gruntfuggly 开发的这个插件下载量高且稳定。点击“安装”后无需额外配置即可生效。
安装完成后,只要代码中有 TODO、FIXME 等关键字,它们就会被高亮显示,同时左侧活动栏会出现一个树状图标(旗帜形状),点击即可查看所有匹配项。
自定义关键词和高亮样式
默认支持的关键词包括 TODO、FIXME、bug 等,但你可以根据团队规范添加自己的标签,比如 NOTE、CHANGED 或 REVIEW。
在设置中搜索 “todo-tree”,进入 “Todo Tree > Regex: Tags” 配置项,修改正则表达式来增加识别内容:
- • 添加 NOTE 和 REVIEW:修改为 (TODO|FIXME|BUG|NOTE|REVIEW) • 支持带感叹号的强调形式:如 TODO! 可用 (TODO!?|FIXME!?|BUG)
你还可以为不同关键词设置不同颜色。在 “Todo Tree > Decorators” 中启用着色功能,并为每个关键词指定前景色、背景色或图标样式,让重要任务更醒目。
过滤与组织任务视图
Todo Tree 面板支持按文件夹、项目、关键字分类展示任务。你可以通过设置 “Todo Tree > Grouping” 启用分组,比如先按文件路径再按类型排序。
如果只想关注高优先级事项,可以设置只显示特定标签。例如,在面板顶部输入框中输入 FIXME 或 TODO!,列表会实时过滤。
还支持排除某些目录(如 node_modules)或文件类型,在设置中配置 “Todo Tree > Exclude Globs” 即可避免干扰信息出现。
结合工作流程提升效率
建议在日常开发中养成写结构化注释的习惯,例如:
- • // TODO: 实现用户登录验证逻辑 • // FIXME: 处理空数组导致的崩溃 • // NOTE: 此方法将在下个版本废弃
配合 Todo Tree,这些注释不再是散落的文本,而是可视化的任务清单。每天开工前看一眼面板,快速定位需要处理的问题。
基本上就这些。合理使用 Todo Tree,能让代码中的临时笔记变成高效的开发助手,不复杂但容易忽略。开启它之后,你会发现很多“记得回头改”的事情终于不会再忘了。