最近在寫自己的 side project,但發現專案裡面的 VS Code 不會顯示我很習慣會用來提示自己沒寫好的警告黃底線,例如:useEffect dependency 沒寫完整的警告提示。這次也稍微記錄一下自己排除這個問題的過程,以及最後的解決方法。

VS Code 未顯示應該出現的 ESLint 警告提示
實際情境
以下是一段 React 專案中的程式碼,這個專案已經有 ESLint 的相關設定,預期在這個useEffect中,應該會有兩個相依值,所以當沒有把所有應該放入的相依值放入時,應該會有黃底線提示才對,但在這裡的實際情況卻是「沒有顯示任何提示 」(如下圖)。
【亂亂寫筆記】VS Code - ESLin 應出現的警告提

除錯過程
逐步縮小問題發生的原因範圍:
1. 確認 VS Code 的 ESLint Extension 有無安裝。
2. 透過跑 ESLint 指令,確認 ESLint 規則是否有正常套用。
2. 確認 VS Code 有關 ESLint 的相關設定。

【亂亂寫筆記】VS Code - ESLin 應出現的警告提

- ESLint 有無設定 enable
- ESLint settings 內的 validate 設定有無加上

【亂亂寫筆記】VS Code - ESLin 應出現的警告提

3. 確認 VS Code 版本和  ESLint 版本是否有不符的狀況。
從 VS Code output 將下拉選單切換到 ESLint 看結果。
【亂亂寫筆記】VS Code - ESLin 應出現的警告提

最終問題排除方式
最後發現在這最後一個步驟,有出現以下的訊息,確認到是 VS Code 版本不符的狀況。
The language client requires VS Code version ^1.90.0 but received version 1.85.2

所以改使用版本較新的 VS Code 就能正常在 VS Code 視窗中確認到警告提示。
【亂亂寫筆記】VS Code - ESLin 應出現的警告提


【亂亂寫筆記】VS Code - ESLin 應出現的警告提貼心小提醒!!
因為是亂亂寫筆記,真的就是純紀錄之前實作時,如何解決曾經卡住過的問題,所以主要都是解決問題的方式為主,不會有太多詳細說明。