VSCode 上 Vue 自訂元件失去高亮

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

恢復正常

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

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ