遇到的問題

最近接觸了一個歷史遺留項目時，我遭遇了堪稱"史詩級屎山"的代碼結構——各種命名混亂的自定義組件和原生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

完美解決！！

這樣我們不論更換什么主題，自定義組件都是特殊顏色高亮的，從此在屎山代碼中精準識別組件，就像在黑暗中擁有了夜視儀！