カスタムコンポーネントへの`v-model`の利用を`eslint-plugin-vue`のカスタムルールで検知するメモ📝

Vue3アップデートの破壊的変更として以下のカスタムコンポーネントのv-modelに関するものがあり結構影響範囲が広そうで何かソリューション無いかなと思っていたのですが、

v3-migration.vuejs.org

eslint-plugin-vueのカスタムルールを作れば意外と簡単にカスタムコンポーネントのv-modelの利用箇所を特定できそうだったので作成したカスタムルールをメモがてら記載してきます📝

以下がそのコードで適当なディレクトリに配置し、ESLintの設定ファイルから有効化すればカスタムコンポーネントへのv-modelの利用を検知できます。

VAttribute[directive=true][key.name.name='model'でv-modelが記載されている要素の属性にアクセスし、utils.isCustomComponent(node.parent.parent)で属性から要素へ辿ってカスタムコンポーネントかどうかを判定し、カスタムコンポーネントだったらreportするようにしています。

/**
 * @author madogiwa
 * See LICENSE file in root directory for full license.
 */
"use strict";

const utils = require("eslint-plugin-vue/lib/utils");

module.exports = {
  meta: {
    type: "problem",
    docs: {
      description: "disallow using v-model for custom component is affected by a breaking change in Vue3.",
      categories: undefined,
      url: "https://eslint.vuejs.org/rules/no-use-v-model-for-custom-component.html",
    },
    fixable: null,
    schema: [],
    messages: {
      error: "Using v-model for custom component is affected by a breaking change in Vue3.",
    },
  },
  /** @param {RuleContext} context */
  create(context) {
    return utils.defineTemplateBodyVisitor(context, {
      "VAttribute[directive=true][key.name.name='model']"(node) {
        if (utils.isCustomComponent(node.parent.parent)) {
          context.report({
            node,
            loc: node.loc,
            messageId: "error",
          });
        }
      },
    });
  },
};