首頁  >  文章  >  web前端  >  使用 ESLint 限制某些語法

使用 ESLint 限制某些語法

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-08 06:27:02289瀏覽

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

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

理解抽象語法樹 (AST)

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

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

Restricting some syntax with ESLint

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

例如,在編寫 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 尋求協助!它也很擅長解釋選擇器:

Restricting some syntax with ESLint

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

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn