ESlint 是一個(gè)很棒的工具，可以使我們的程式碼更加一致，並為我們的團(tuán)隊(duì)節(jié)省大量時(shí)間。有大量的插件可以處理大多數(shù)通用用例，但有時(shí)我們有一些特定的需求，創(chuàng)建自己的規(guī)則會(huì)花費(fèi)太多時(shí)間。

對(duì)於最簡單的情況，當(dāng)我們只想禁止使用某個(gè)函數(shù)（或?qū)嶋H上的其他任何內(nèi)容）時(shí)，我們可以利用預(yù)設(shè)規(guī)則：no-restricted-syntax。

理解抽象語法樹 (AST)

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

要了解它的工作原理，我們可以使用AST Explorer，這是一個(gè)方便的工具，可以並行顯示一些程式碼及其AST，您可以將滑鼠懸?；螯c(diǎn)擊程式碼的任何部分以突出顯示其相應(yīng)的AST 部分:

?? 更改語言時(shí)請(qǐng)注意正確選擇解析器。

例如，在編寫 Vue 程式碼時(shí)，請(qǐng)務(wù)必在我們的範(fàn)例中使用 vue-eslint-parser，因?yàn)槲覀円帉懸粋€(gè) ESlint 選擇器。您也可以檢查 @vue/compiler-dom 輸出的內(nèi)容，但您無法使用 ESlint 規(guī)則查詢結(jié)果樹。

建立選擇器

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

• AST 節(jié)點(diǎn)類型：ForStatement
• 屬性值：[attr="foo"]
• 巢狀屬性：[attr.level2="foo"]
• 欄位：函數(shù)宣告>識(shí)別符.id

所以，給這段程式碼：

它將使用 @typescript-eslint/parser 產(chǎn)生以下 AST：

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

範(fàn)例

簡單的功能選擇器

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

Vue 模板內(nèi)部

這是另一個(gè)範(fàn)例，禁止在Vue 範(fàn)本中以（相當(dāng)hacky）的方式在範(fàn)本中設(shè)定局部變數(shù)（請(qǐng)注意，該規(guī)則以vue/ 為前綴，因?yàn)樗枰猠slint-plugin-vue 套件）：

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

使用正規(guī)表示式

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

結(jié)論

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

此外，如果您只需要限制進(jìn)口，使用 no-restricted-imports 規(guī)則會(huì)更簡單：

這個(gè)解決方案在最簡單的情況下效果很好，但它不會(huì)讓你提出自動(dòng)修復(fù)。為了獲得更完整的解決方案，應(yīng)建立自訂規(guī)則。

感謝這些規(guī)則，我們不會(huì)重複同樣的錯(cuò)誤兩次，從而節(jié)省了時(shí)間！

以上是使用 ESLint 限制某些語法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！