启用TODO Tree插件可集中管理VSCode中的TODO注释:一、安装插件并重启;二、通过命令面板启用侧边栏树状视图;三、自定义正则匹配关键词;四、配置排除路径提升性能;五、开启高亮与跳转联动。

如果您在VSCode中编写代码时添加了TODO注释,但难以快速定位和浏览所有待办事项,则可能是由于默认编辑器未启用注释聚合视图。以下是启用并配置TODO Tree插件以集中展示项目内所有TODO注释的步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装TODO Tree插件
TODO Tree是一个VSCode扩展,通过扫描工作区文件中的特定关键词(如TODO、FIXME、XXX等),在侧边栏生成结构化树状列表。安装是启用该功能的前提。
1、打开VSCode,点击左侧活动栏的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入TODO Tree。
3、在搜索结果中找到作者为Gruntfuggly的插件,点击“安装”按钮。
4、安装完成后点击“重新加载”使插件生效。
二、启用自动扫描与侧边栏显示
插件安装后需确保其扫描功能已激活,并将TODO Tree视图添加至侧边栏,以便持续可见。
1、按下Cmd+Shift+P(Mac)或Ctrl+Shift+P(Windows/Linux)打开命令面板。
2、输入并选择TODO Tree: Toggle Tree命令。
3、此时右侧活动栏将出现TODO Tree图标,点击即可展开侧边树状视图。
4、若未自动扫描,请右键点击树视图空白处,选择Refresh手动触发扫描。
三、自定义关键词匹配规则
默认情况下TODO Tree仅识别TODO、FIXME、XXX三类标签,可通过修改设置支持项目约定的其他标记(如HACK、NOTE、BUG)。
1、打开VSCode设置(Cmd+, ),切换到“工作区”选项卡。
2、在搜索框中输入todo-tree.regex.regex。
3、点击“在settings.json中编辑”,在JSON对象内添加如下字段:
"todo-tree.regex.regex": "(//|#|/\\*|^|^[ \\t]*\\*)\\s*(TODO|FIXME|XXX|HACK|BUG|NOTE)"
4、保存文件后重启TODO Tree视图或执行Refresh操作。
四、配置文件路径过滤规则
为避免扫描node_modules、dist等无关目录,可设置排除路径,提升扫描性能与结果准确性。
1、在设置中搜索todo-tree.general.excludeGlobs。
2、点击“在settings.json中编辑”,添加以下数组项:
"todo-tree.general.excludeGlobs": ["**/node_modules/**", "**/dist/**", "**/build/**", "**/*.min.js"]
3、保存后刷新TODO Tree视图,确认排除目录中的注释不再显示。
五、启用高亮与跳转联动
启用行内高亮可直观识别源码中的TODO位置,并支持一键跳转至对应行,提升上下文关联效率。
1、在设置中搜索todo-tree.highlights.enable,将其设为true。
2、继续搜索todo-tree.highlights.useColourScheme,关闭该选项以启用自定义颜色。
3、添加如下高亮配置到settings.json:
"todo-tree.highlights.defaultHighlight": { "type": "text", "foreground": "red", "icon": "alert" }
4、保存后,所有匹配的TODO行首将显示红色感叹号图标,点击图标可直接跳转至该行。










