VSCode中Dart类型注解尖括号不遵循主题配色显示异常问题

问题描述 #

当前所用主题设定尖括号颜色为绿色，但实际显示被覆盖为白色，且字体也发生了变化。该问题同样出现在Monokai等其他会对尖括号进行着色的主题中。

以上为检查得到的编辑器token作用域信息，且尖括号闭合后颜色会恢复正常。请问该问题是什么原因导致的，如何解决？

问题原因 #

• 核心为语法高亮作用域优先级冲突：第三方扩展（多为自定义语法规则类、代码补全类、高亮修改类扩展）给未闭合状态的尖括号token分配了更高优先级的样式规则，直接覆盖了主题默认的尖括号配色与字体配置。
• 未闭合的尖括号被额外匹配到了非标签类的作用域规则，因此样式异常；标签闭合后token识别回归正常的标签尖括号作用域，主题样式就能正常生效。
• Monokai这类主题会单独给punctuation.definition.tag作用域配置尖括号配色，只要存在更高优先级的样式规则就会被覆盖，因此多个主题都能复现该问题。

解决方法 #

1. 排查冲突扩展：禁用所有第三方扩展后重启编辑器，确认问题是否消失。如果恢复正常就逐个启用扩展，定位到冲突扩展后卸载，或关闭该扩展的高亮相关配置即可。
2. 手动强制指定尖括号样式：打开编辑器settings.json配置文件，添加以下规则，该规则优先级高于扩展和默认主题配置，可直接固定尖括号样式：

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "punctuation.definition.tag.begin, punctuation.definition.tag.end",
            "settings": {
                "foreground": "#A6E22E", // 可替换为你所用主题的尖括号色值，此处为Monokai默认绿色
                "fontStyle": "" // 清空额外字体样式修改
            }
        }
    ]
}

3. 重置自定义高亮规则：如果此前修改过编辑器的自定义TextMate规则，删除对应配置后重启编辑器即可恢复。

内容的提问来源于stack exchange，提问作者emile_o_