ESlint 是一個很棒的工具,可以使我們的程式碼更加一致,並為我們的團隊節省大量時間。有大量的插件可以處理大多數通用用例,但有時我們有一些特定的需求,創建自己的規則會花費太多時間。
對於最簡單的情況,當我們只想禁止使用某個函數(或實際上的其他任何內容)時,我們可以利用預設規則:no-restricted-syntax。
在寫第一個選擇器之前,我們需要先了解底層系統。 AST 只是以嵌套物件(因此 AST 中的「樹」)形式表示的程序,由「解析器」建立。它非常靈活,因為它可以輕鬆讀取、查詢和操作。另一種方法是使用正規表示式,但這會很難讀寫。所以這基本上是一個中間步驟,透過理解我們的程式碼,IDE 可以完成所有偉大的事情。
要了解它的工作原理,我們可以使用AST Explorer,這是一個方便的工具,可以並行顯示一些程式碼及其AST,您可以將滑鼠懸停或點擊程式碼的任何部分以突出顯示其相應的AST 部分:
⚠️ 更改語言時請注意正確選擇解析器。
例如,在編寫 Vue 程式碼時,請務必在我們的範例中使用 vue-eslint-parser,因為我們要編寫一個 ESlint 選擇器。您也可以檢查 @vue/compiler-dom 輸出的內容,但您無法使用 ESlint 規則查詢結果樹。
我們需要的第二個有用工具是 ESLint 選擇器文件。它列出了我們可以用來查詢 AST 的表達式,如果您習慣使用 CSS,它可能會感覺很熟悉。它基於相同的「級聯」行為,具有後代、兄弟、節點和屬性過濾等匹配器。以下是文件中的一些範例:
所以,給這段程式碼:
它將使用 @typescript-eslint/parser 產生以下 AST:
在我們的例子中,我們需要匹配一個名為dayjs(帶有name屬性的識別碼)的函數呼叫(CallExpression)。我們還需要直接後代選擇器 >確保我們不匹配任何巢狀有 dayjs 標識符的函數呼叫。所以選擇器將是 CallExpression >標識符[name="dayjs"].
這是我們的選擇器,用於防止在沒有 UTC 的情況下使用 dayjs,您可以在 ESLint Playground 中嘗試:
這是另一個範例,禁止在Vue 範本中以(相當hacky)的方式在範本中設定局部變數(請注意,該規則以vue/ 為前綴,因為它需要eslint-plugin-vue 套件):
順便說一下,您可以在這裡閱讀更多關於這個奇怪的技巧的信息,它在過去給我們帶來了一些反應性問題,所以我們決定完全禁止它。
這是最後一個例子,我們遇到了需要禁止使用一組特定翻譯的情況,因此我們必須找到第一個參數以導出開頭的 t (或任何變體)函數。 :
如果您很難找到正確的選擇器,您可以向 ChatGPT 尋求協助!它也很擅長解釋選擇器:
此外,如果您只需要限制進口,使用 no-restricted-imports 規則會更簡單:
這個解決方案在最簡單的情況下效果很好,但它不會讓你提出自動修復。為了獲得更完整的解決方案,應建立自訂規則。
感謝這些規則,我們不會重複同樣的錯誤兩次,從而節省了時間!
以上是使用 ESLint 限制某些語法的詳細內容。更多資訊請關注PHP中文網其他相關文章!