はじめに
ESLintのpluginへPRを送る際に、ESLintのpluginってそもそもどういう仕組み？という部分で躓いたので、今後のための備忘録を残しておく。
eslint-plugin-vuetifyとは？
eslint-plugin-vuetifyはVuetify2→3へのマイグレーションを行い際に、Vuetify2で利用できていたがVuetify3ではなくなったコンポーネントや、Vuetify3では名前が変わったコンポーネントなどに開発者が気付けるようにするためのESLintルールを追加できるplugin。
PRを送るまでに理解したこと
ESLintのルールの作り方
の記事が参考になった。
公式だとCustom Rulesにルールの実装方法が書かれている。
ESLintのルールの実装方法としては、eslint-plugin-vuetifyも全く同じで、ソースコードでいうと以下の部分がそれにあたる。
context.parserServices.defineTemplateBodyVisitorってなんだ？
contextオブジェクトについては、ESLintが持っているオブジェクト（JSON）でThe Context Objectに詳細が書かれている。
context.parserServicesはDeprecatedになっているが、このオブジェクトにはカスタムのパーサー（コードをどのように解析してオブジェクトを作るか？をESLintに指示するもの）を利用しているときに、そのパースされた結果のオブジェクトがcontext.parserServicesに入っている（以下、公式からの引用）。
The default parser does not provide any services. However, if a rule is intended to be used with a custom parser, it could use parserServices to access anything provided by that parser.
（デフォルトのパーサーはサービスを提供しない。しかし、ルールがカスタムパーサと共に使用されることを意図している場合、そのパーサが提供するものにアクセスするためにparserServicesを使用することができます。）
そして、defineTemplateBodyVisitorはなんだ？となるが、これはvue-eslint-parserというVueファイルをパースしてくれるパーサーを利用することで利用できるようになるオブジェクトで、詳細はdefineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor, options)に書かれている通り。
つまり、eslint-plugin-vuetifyはこのパーサーにより利用できるようになったdefineTemplateBodyVisitorというオブジェクト（Vueのtemplateの部分のコードのオブジェクト）に対して、新しくESLintのルールを定義しているものということがわかる。
※あとのコードについては簡単で、チェックしたい内容に合わせたコードが実装されており、そのチェック結果をcontext.report()でESLintに伝えている。実際にESLintでチェックしてみると、以下のようにeslint-plugin-vuetifyのルールでのチェックが走っていることも確認できる。
まとめとして
普段からESLintは利用しているが、そのルールをどのように実装するのか？までは踏み込んだことがなかったので、今回PRを送るきっかけで少し理解が深目られた気がするので良かった。
おまけ
送ったPRについて
VListItemAvatarとVListItemIconというコンポーネント？API？がVuetify2では利用できていたが、Vuetify3からはprops or slotに変わったので、それをESLintのエラーで知らせるようにする改修をした。
