vscode语法高亮需插件补足:vscode-highlight用正则实现行内多级着色但易出错,todo tree结构化扫描生成任务列表;token高亮更稳定但依赖晦涩scope名,二者可共存协同使用。

VSCode 默认的语法高亮足够基础,但真正影响开发体验的,是「哪些词该亮、怎么亮、亮得是否精准」——这靠默认主题和语言插件远远不够,必须用专门的高亮插件补足。
vscode-highlight 插件的正则匹配写法容易出错
它不依赖语言服务,纯靠正则匹配文本,所以 highlight.regexes 配置里最容易翻车的是转义和捕获组数量不一致。
-
//TODO要写成\\/\/TODO(VSCode JSON 里需双层转义) - 每个括号捕获组,必须在数组里对应一个对象配置,比如
"(//TODO)(:)(.*)"有 3 个组,就得提供长度为 3 的数组:[{"color":"#ff0000"},{"color":"#0000ff"},{"color":"#666"}] - 没加括号的匹配(如
// TODO不带冒号)会整个匹配,但无法分段着色;想高亮关键词本身又保留后续文字颜色,必须用()显式捕获
Todo Tree 和 vscode-highlight 的分工差异
两者都处理 // TODO 类注释,但定位完全不同:
-
Todo Tree是结构化扫描:把所有匹配行提取出来,生成侧边栏树形列表,适合批量追踪任务 -
vscode-highlight是视觉强化:在编辑器内原地高亮,支持多级颜色区分(比如// TODO红、// FIXME橙、// HACK紫),但不提供跳转或过滤功能 - 实际项目中建议共存:用
Todo Tree管理进度,用vscode-highlight防止漏看行内标记
自定义 token 高亮比正则更稳定但更难调试
如果想改 function、const 这类语法单元的颜色,走 editor.tokenColorCustomizations 路线更可靠,因为它是基于 VSCode 的语法作用域(scope)系统,不受正则边界和上下文干扰。
- 先用
Help → Toggle Developer Tools,再按Ctrl+Shift+P输入Developer: Inspect Editor Tokens,点击代码中的目标词,看控制台输出的scope名(比如keyword或support.type.object.console) - 直接在
settings.json里写"scope": "keyword"即可生效,不用写正则、不担心跨行匹配失败 - 缺点是 scope 名称晦涩且语言间差异大,比如 TypeScript 的接口名可能是
support.type.ts,而 JavaScript 是support.type.js,改错 scope 就完全不生效
正则高亮灵活但脆弱,token 高亮稳定但依赖底层语法分析——选哪条路,取决于你盯的是「固定字符串模式」还是「语法结构本身」。多数人卡在中间:既想高亮 // OPTIMIZE,又想让 useState 比普通变量更醒目,这时候就得两个配置并存,且注意它们的优先级和重叠区域。











