遇到的问题

最近接触了一个历史遗留项目时，我遭遇了堪称"史诗级屎山"的代码结构——各种命名混乱的自定义组件和原生HTML标签混杂在一起，视觉上完全无法区分。这让我突然想起，之前在使用vue或者其他框架开发的时候，只要是自定义的标签都会是特殊颜色高亮的（像是下面这样）：

高亮 这种视觉区分能极大提升代码阅读效率，可以让我们快速看到这个元件是不是自定义的。

但某次VS Code更新后，这个救命功能神秘消失了！所有标签变成统一颜色，就像在玉米地里找一颗特定的玉米粒... （如下图）：

🕵️‍♂️开始排查！！

我首先怀疑的是不是Vue-Offeical插件或者其他插件作妖？ 作为Vue开发者，我首先检查了Vue-Offeical插件（毕竟它负责Vue的语法高亮），通过回退Vue-Offeical版本，尝试多个历史Volar版本，发现并没有什么用...

甚至到最后把所有插件都禁用了只留一个Volar，然而依然没用。

难道主题的"锅"吗？

通过切换了几个主题时发现，的确是部分主题有自定义组件高亮效果的，但是！我喜欢的主题都没有...就很闹心。

我只想使用我喜欢的主题配色啊。

接下来就是不停的翻阅文档，终于发现了关键配置项——semanticHighlighting。然而... 尴尬的是，这个配置是给主题开发者用的，需要直接修改主题的package.json文件，但我们用的都是已编译的主题插件，难道要为这个功能自己fork一个主题？太麻烦了...

解决方案

还是继续翻阅VS Code文档吧，最终在VS Code文档中挖到这个配置项：

// 控制是否为支持它的语言显示语义高亮
"editor.semanticHighlighting.enabled": "configuredByTheme"

默认值为configuredByTheme，语义突出显示是由当前颜色主题决定： 主题说亮就亮，主题说不亮就不亮！（像极了甲方...）

既然找到问题就好解决了，我们直接在setting.json里把editor.semanticHighlighting.enabled这个配置项设置为true。

"editor.semanticHighlighting.enabled": true

完美解决！！

这样我们不论更换什么主题，自定义组件都是特殊颜色高亮的，从此在屎山代码中精准识别组件，就像在黑暗中拥有了夜视仪！