TODO Highlight插件可高亮代码中的TODO、FIXME等标记,支持自定义关键字、样式及作用范围,并提供侧边栏任务概览功能。

如果您在VSCode中编写代码时习惯使用TODO、FIXME等标记来标注待办任务,但经常因视觉混杂而遗漏处理,那么TODO Highlight插件可帮助您快速识别并聚焦这些标记。以下是启用并配置该插件的具体操作步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装TODO Highlight插件
该插件需通过VSCode扩展市场获取并安装,确保其处于启用状态后才能对代码中的标记进行高亮渲染。
1、打开VSCode,点击左侧活动栏最下方的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入TODO Highlight,找到作者为wayou的插件。
3、点击插件右侧的“安装”按钮,等待安装完成。
4、安装完毕后点击“重新加载”或手动重启VSCode使插件生效。
二、启用默认高亮规则
插件内置常见关键字如TODO、FIXME、XXX等的匹配模式,启用后无需额外配置即可自动高亮显示。
1、按下Cmd+Shift+P(Mac)调出命令面板。
2、输入并选择Preferences: Open Settings (JSON)。
3、在settings.json中确认不存在"todo-highlight.defaultStyle"被设为false的覆盖项。
4、保存文件,任意打开含TODO注释的代码文件,观察标记是否已呈现黄色背景高亮。
三、自定义高亮关键字与样式
可通过修改用户设置支持项目特定标记(如HACK、REVIEW),并调整颜色、字体粗细等视觉属性以提升辨识度。
1、再次打开settings.json文件。
2、在根对象内添加"todo-highlight.keywords"数组,例如:
[{"text": "HACK", "color": "#ff0000", "backgroundColor": "#ffffff", "overviewRulerColor": "#ff0000"}]。
3、若需统一修改所有关键字样式,添加"todo-highlight.defaultStyle"对象,设置"color"、"backgroundColor"等字段。
4、保存后重新打开代码文件,验证新关键字是否按指定样式高亮。
四、限制高亮作用范围
避免在依赖库或构建产物中触发误高亮,可通过文件路径排除机制精准控制扫描区域。
1、在settings.json中添加"todo-highlight.include",填入允许扫描的glob模式,如["**/*.ts", "**/*.js"]。
2、添加"todo-highlight.exclude",填入需跳过的路径,如["**/node_modules/**", "**/dist/**", "**/build/**"]。
3、确保两项配置均为数组格式,字符串须用双引号包裹。
4、保存设置,重启VSCode或重新加载窗口,检查node_modules目录下的TODO不再被高亮。
五、启用侧边栏任务概览
插件提供全局任务列表视图,集中展示当前工作区全部待办项,便于批量追踪和跳转。
1、按下Cmd+Shift+P打开命令面板。
2、输入并选择TODO Highlight: Toggle Sidebar。
3、侧边栏将出现在编辑器右侧,列出所有匹配项及其所在文件路径与行号。
4、点击任一列表项,编辑器自动跳转至对应代码位置。










