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

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

理解抽象語法樹 (AST)

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

要了解它的工作原理，我們可以使用 AST Explorer，這是一個(gè)方便的工具，可以并行顯示一些代碼及其 AST，您可以將鼠標(biāo)懸?；騿螕舸a的任何部分以突出顯示其相應(yīng)的 AST 部分:

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

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

創(chuàng)建選擇器

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

• AST 節(jié)點(diǎn)類型：ForStatement
• 屬性值：[attr="foo"]
• 嵌套屬性：[attr.level2="foo"]
• 字段：函數(shù)聲明>標(biāo)識(shí)符.id

所以，給出這段代碼：

const time = dayjs();

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

Program {
  body: [
    VariableDeclaration {
      declarations: [
        VariableDeclarator {
          id: Identifier
          init: CallExpression {
            callee: Identifier {
              name: "dayjs"
            }
            arguments: []
            optional: false
          }
        }
      ]
      kind: "const"
    }
  ]
  sourceType: "module"
}

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

示例

簡(jiǎn)單的功能選擇器

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

const time = dayjs();

Program {
  body: [
    VariableDeclaration {
      declarations: [
        VariableDeclarator {
          id: Identifier
          init: CallExpression {
            callee: Identifier {
              name: "dayjs"
            }
            arguments: []
            optional: false
          }
        }
      ]
      kind: "const"
    }
  ]
  sourceType: "module"
}

Vue 模板內(nèi)部

這是另一個(gè)示例，禁止在 Vue 模板中以（相當(dāng) hacky）的方式在模板中設(shè)置局部變量（請(qǐng)注意，該規(guī)則以 vue/ 為前綴，因?yàn)樗枰?eslint-plugin-vue 包）：

'no-restricted-syntax': [
  'error',
  {
    selector: 'CallExpression > Identifier[name="dayjs"]',
    message: 'Always use dayjs.utc() instead of dayjs() to avoid timezone issues',
  },
]

const foo = dayjs();
//          ^^^^^ Invalid
const bar = dayjs.utc();

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

使用正則表達(dá)式

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

'vue/no-restricted-syntax': [
  'error',
  {
    selector: 'VAttribute > VExpressionContainer > AssignmentExpression',
    message: 'Do not assign values in templates as it will not be reactive',
  },
],

<template>
  <div :set="(foo = 'bar')">{{ foo }}</div>
  <!-- Outputs <div>bar</div> -->
  <!--       ^^^^^^^^^^ Invalid -->
</template>

結(jié)論

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

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

'no-restricted-syntax': [
  'error',
  {
    selector: 'CallExpression[callee.name=/^(t|tc|tf|te|d|n)$/][arguments.0.value=/^exports./]',
    message: 'Do not assign values in templates as it will not be reactive',
  },
],

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

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

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