ESLint による一部の構文の制限

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

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

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

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

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

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

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

セレクターの作成

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

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

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

例

シンプルな機能セレクター

これは、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 テンプレートの内部

これは、Vue テンプレートのテンプレートにローカル変数を設定する (かなりハックな) 方法を禁止する別の例です (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();

ところで、この奇妙なトリックについて詳しくは、ここで読むことができます。この奇妙なトリックは、過去にいくつかの反応性の問題を引き起こしたため、完全に禁止することにしました。

正規表現の使用

これは最後の例です。特定の翻訳セットの使用を禁止する必要があるため、exports で始まる最初の引数を持つ t (または任意のバリエーション) 関数を見つける必要がありました。 :

'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>

結論

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

また、インポートのみを制限する必要がある場合は、no-restricted-imports ルールを使用する方が簡単です。

'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',
  },
],

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

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

以上がESLint による一部の構文の制限の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。