はじめに

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のエラーで知らせるようにする改修をした。