ESlint はコードの一貫性を高め、チームの時(shí)間を大幅に節(jié)約する素晴らしいツールです。一般的なユースケースのほとんどを処理するプラグインは大量にありますが、場(chǎng)合によっては特定のニーズがあり、獨(dú)自のルールを作成すると時(shí)間がかかりすぎます。

最も単純な場(chǎng)合、関數(shù) (または実際には他のもの) の使用を禁止したい場(chǎng)合は、デフォルトのルール no-restricted-syntax を利用できます。

抽象構(gòu)文ツリー (AST) を理解する

最初のセレクターを作成する前に、基礎(chǔ)となるシステムを理解する必要があります。 AST は、「パーサー」によって作成された、ネストされたオブジェクト (したがって、AST の「ツリー」) の形式でプログラムを表現(xiàn)したものにすぎません。簡(jiǎn)単に読み取り、クエリ、操作できるため、非常に柔軟です。代わりに正規(guī)表現(xiàn)を使用することもできますが、読み書きが非常に困難になります。したがって、これは基本的に、コードを理解することで IDE が行うすべての優(yōu)れた機(jī)能を可能にする中間ステップです。

その仕組みを理解するために、AST Explorer を使ってみましょう。AST Explorer は、コードの一部とその AST を並行して表示する便利なツールです。コードの任意の部分にカーソルを置くかクリックすると、対応する AST 部分が強(qiáng)調(diào)表示されます。 :

?? 言語(yǔ)を変更するときは、パーサーを正しく選択するように注意してください。

たとえば、Vue コードを記述するときは、ESlint セレクターを記述する必要があるため、この例では vue-eslint-parser を必ず使用してください。 @vue/compiler-dom の出力を検査することもできますが、ESlint ルールを使用して結(jié)果のツリーをクエリすることはできません。

セレクターの作成

2 番目に必要な便利なツールは、ESLint セレクターのドキュメントです。ここには、AST のクエリに使用できる式がリストされています。CSS の操作に慣れている場(chǎng)合は、馴染みがあるかもしれません。これは、子孫、兄弟、ノードや屬性のフィルタリングなどのマッチャーを使用した、同じ「カスケード」動(dòng)作に基づいています。以下にドキュメントの例をいくつか示します:

• AST ノード タイプ: ForStatement
• 屬性値: [attr="foo"]
• ネストされた屬性: [attr.level2="foo"]
• フィールド: FunctionDeclaration >識(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"
}

私たちの場(chǎng)合、名前が dayjs (name プロパティを持つ識(shí)別子) である関數(shù)呼び出し (CallExpression) と一致する必要があります。直接の子孫セレクター > も必要です。 dayjs 識(shí)別子がネストされている関數(shù)呼び出しと一致しないことを確認(rèn)するためです。したがって、セレクターは CallExpression > になります。識(shí)別子[name="dayjs"].

例

シンプルな機(jī)能セレクター

これは、ESLint Playground でライブで試すことができる、UTC なしでの dayjs の使用を防ぐためのセレクターです:

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)部

これは、Vue テンプレートのテンプレートにローカル変數(shù)を設(shè)定する (かなりハックな) 方法を禁止する別の例です (eslint-plugin-vue パッケージが必要なため、ルールには 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ī)表現(xiàn)の使用

これは最後の例です。特定の翻訳セットの使用を禁止する必要があるため、exports で始まる最初の引數(shù)を持つ 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é)論

適切なセレクターを思いつくのに苦労している場(chǎng)合は、ChatGPT に助けを求めてください。セレクターの説明も上手です:

また、インポートのみを制限する必要がある場(chǎng)合は、no-restricted-imports ルールを使用する方が簡(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',
  },
],

このソリューションは最も単純な狀況ではうまく機(jī)能しますが、自動(dòng)修正を提案することはできません。より完全なソリューションを得るには、代わりにカスタム ルールを作成する必要があります。

これらのルールのおかげで、同じ間違いを 2 回繰り返さずに時(shí)間を節(jié)約できます!

以上がESLint による一部の構(gòu)文の制限の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。