使用 ESLint 限制某些語法

ESlint 是一個很棒的工具，可以使我們的程式碼更加一致，並為我們的團隊節省大量時間。有大量的插件可以處理大多數通用用例，但有時我們有一些特定的需求，創建自己的規則會花費太多時間。

對於最簡單的情況，當我們只想禁止使用某個函數（或實際上的其他任何內容）時，我們可以利用預設規則：no-restricted-syntax。

理解抽象語法樹 (AST)

在寫第一個選擇器之前，我們需要先了解底層系統。 AST 只是以嵌套物件（因此 AST 中的「樹」）形式表示的程序，由「解析器」建立。它非常靈活，因為它可以輕鬆讀取、查詢和操作。另一種方法是使用正規表示式，但這會很難讀寫。所以這基本上是一個中間步驟，透過理解我們的程式碼，IDE 可以完成所有偉大的事情。

要了解它的工作原理，我們可以使用AST Explorer，這是一個方便的工具，可以並行顯示一些程式碼及其AST，您可以將滑鼠懸停或點擊程式碼的任何部分以突出顯示其相應的AST 部分:

⚠️ 更改語言時請注意正確選擇解析器。

例如，在編寫 Vue 程式碼時，請務必在我們的範例中使用 vue-eslint-parser，因為我們要編寫一個 ESlint 選擇器。您也可以檢查 @vue/compiler-dom 輸出的內容，但您無法使用 ESlint 規則查詢結果樹。

建立選擇器

我們需要的第二個有用工具是 ESLint 選擇器文件。它列出了我們可以用來查詢 AST 的表達式，如果您習慣使用 CSS，它可能會感覺很熟悉。它基於相同的「級聯」行為，具有後代、兄弟、節點和屬性過濾等匹配器。以下是文件中的一些範例：

• AST 節點類型：ForStatement
• 屬性值：[attr="foo"]
• 巢狀屬性：[attr.level2="foo"]
• 欄位：函數宣告>識別符.id

所以，給這段程式碼：

它將使用 @typescript-eslint/parser 產生以下 AST：

在我們的例子中，我們需要匹配一個名為dayjs（帶有name屬性的識別碼）的函數呼叫（CallExpression）。我們還需要直接後代選擇器 >確保我們不匹配任何巢狀有 dayjs 標識符的函數呼叫。所以選擇器將是 CallExpression >標識符[name="dayjs"].

範例

簡單的功能選擇器

這是我們的選擇器，用於防止在沒有 UTC 的情況下使用 dayjs，您可以在 ESLint Playground 中嘗試：

Vue 模板內部

這是另一個範例，禁止在Vue 範本中以（相當hacky）的方式在範本中設定局部變數（請注意，該規則以vue/ 為前綴，因為它需要eslint-plugin-vue 套件）：

順便說一下，您可以在這裡閱讀更多關於這個奇怪的技巧的信息，它在過去給我們帶來了一些反應性問題，所以我們決定完全禁止它。

使用正規表示式

這是最後一個例子，我們遇到了需要禁止使用一組特定翻譯的情況，因此我們必須找到第一個參數以導出開頭的 t （或任何變體）函數。 :

結論

如果您很難找到正確的選擇器，您可以向 ChatGPT 尋求協助！它也很擅長解釋選擇器：

此外，如果您只需要限制進口，使用 no-restricted-imports 規則會更簡單：

這個解決方案在最簡單的情況下效果很好，但它不會讓你提出自動修復。為了獲得更完整的解決方案，應建立自訂規則。

感謝這些規則，我們不會重複同樣的錯誤兩次，從而節省了時間！

以上是使用 ESLint 限制某些語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！