webstorm 默认仅识别todo、fixme、xxx且颜色固定为灰色;需在settings→editor→todo中添加review\b等正则模式并单独设置颜色,颜色配置位于general→todo default,修改后须重启todo工具窗口。

WebStorm 默认只高亮 TODO、FIXME、XXX 这三个词,且颜色固定为灰色(不是注释色),想改颜色或支持 REVIEW、BUG 等自定义标签,必须手动配置——不配就永远不识别、不着色、不进 TODO 工具窗口。
怎么让 WebStorm 识别自定义 TODO 标签(比如 REVIEW)
默认模式只匹配单行中的 TODO 类关键词,且仅在 JavaScript/TypeScript 文件中支持多行注释里的识别。要加 REVIEW 或 BUG,得进正则匹配规则里加模式:
- 打开
Settings → Editor → TODO - 点击
+ Add Pattern,填入正则:REVIEW\b(\b是单词边界,避免匹配到PREVIEW) - 勾选
Case insensitive(大小写不敏感) - 注意:不要写
// REVIEW或/* REVIEW */—— 正则只管文字本身,上下文由 WebStorm 自动判断是否在注释内
为什么改了注释颜色,TODO 还是灰色
因为 TODO 的颜色不属于 Comment 分类,它独立挂在 General → TODO default 下。哪怕你把所有注释都调成绿色,TODO 依然灰着。
- 路径是:
Settings → Editor → Color Scheme → General → TODO default - 这里能单独设背景色、前景色、字体样式(比如加粗)
- 如果用了语义高亮(Semantic highlighting),它可能覆盖部分显示效果,建议先关掉测试:
Settings → Editor → Color Scheme → Language Defaults → Enable semantic highlighting
怎么批量设置多个 TODO 标签的不同颜色
每个自定义模式(如 REVIEW、OPTIMIZE)可以绑定独立颜色和过滤器,但前提是它们被定义为不同“模式”而非同一组:
- 在
TODO设置页,为每个标签建一个 Pattern:REVIEW\b、OPTIMIZE\b、BUG\b - 每个 Pattern 右侧可点颜色方块,单独设 foreground/background
- 再进
Filters区域,为每个 Pattern 建对应 Filter(比如叫Review only),这样在 TODO 工具窗口顶部就能按标签筛选 - 注意:Filter 名称不能重复,Pattern 正则也不能重叠(比如
REVIEW和REVIEWED共存时,后者会被前者误匹配)
Live Template 配合 TODO 使用的坑
用 rv + Tab 插入 // REVIEW[alice] xxx 很方便,但容易忽略两个关键点:
- Live Template 必须启用对应上下文:创建后要点
Define,勾选Everywhere或至少JavaScript/TypeScript,否则只在某些文件类型生效 -
$who$变量若设为user.name表达式,在多人协作项目中会暴露本地用户名;更稳妥的是留空或用clipboard()手动粘贴 - 生成的注释必须落在 WebStorm 认定的“注释区域”里(比如
//开头或/* */内),否则即使含REVIEW也不会被识别为 TODO
最常被跳过的一步:改完所有设置后,必须重启 TODO 工具窗口(关闭再打开)或点击右上角刷新按钮,否则旧缓存会导致新标签不显示、颜色不变。另外,正则里漏写 \b 或大小写混用,是导致匹配失败的高频原因。











