VSCode 上 Vue 自訂元件失去高亮

前言

最近開發發現 Volar 的自訂元件高亮功能好像怪怪的，所以記錄一下原因。

問題

通常來講，我們在 Vue 的時候只要是自定義的元件都會是綠色高亮，這樣的好處是可以讓我們快速看到這個元件是不是自定義的，像是下面這樣：

但是不知道為什麼在某次更新 VSCode 之後全部變成了這樣…

所以就要來記錄一下原因了

障礙排除

第一直覺我就先去找了 Vue 官方所做的 Vue Language Features (Volar) 套件，我以為是這個套件更新出現了 Bug，所以嘗試移除並重新安裝發現無效，後又找到以下這一篇 Issues：

Syntax highlighting seems different from the previous version

就可以確定有人是跟我一樣的，但是這個問題官方在去年就已經修正了，所以我就去看看自己的版本是不是最新的，結果發現我是最新的版本，所以就不是這個問題了 QQ

接下來我就開始懷疑該不會是 VSCode 某次更新發神經又加了什麼或者改了什麼設定吧？所以我就嘗試去找 VSCode 的設定，結果發現了這個設定：

1
2
3
4

{
  // ... 其他設定
  "editor.semanticHighlighting.enabled": false,
}

這個設定是專門控制是否會為支援的語言顯示的選項，但不知道為什麼被設定為 false 了 Orz，將它改完 true 就正常了（你可以刪除，反正預設為 true）

如果這個問題沒修正的話，其實在開發上跟維護上真的滿困擾的，因為人就是視覺動物咩…