Vue 向けのスマートな custom rule の実装について

[kazupon]

質問です。

聞きたいこと

今、Vue 向けに、i18n の custom rule を 作っているのですが、.vueと.(j|t)s (SFC と SFC 以外のJavaScript/TypeScript) の両方に対応した custome rule 作りたい。

困っていること

.vue の方の custom rule はvue-eslint-parserのこちらドキュメントにあるように、context.parserServices を使って、custome rule を実装したオブジェクトを return すれば、.vue 向けに対応できます。

ただ、このようにしてしまうと、.(j|t)s のJavaScript/TypeScriptのコードには lint が対応できなくなってしまう。

自分が今考えてる問題の解決方法

context.getFilename()で取得したファイル名の拡張子を見て、動的に custome rule の実装オブジェクトを返す。

module.exports = {
  // ...
  create (context) {
    const filename = context.getFilename()
    if (isSFCFile(filename)) {
      return context.parserServices.defineTemplateBodyVisitor({
        // Event handlers for <template> ...
      }, {
        // Event handlers for <script> ...
      })
    } else {
      return {
        // Evant Handlers for normally ...
      }
    }
  }
}

function isSFCFile (filename) {
  // ...
}

ESLintのAPIか何かで、スマートな方法があれば教えて頂けるとありがたいです。:pray:

[mysticatea]

context.parserServices.defineTemplateBodyVisitor の第2引数は、.vue ファイルでない場合は通常のスクリプトをチェックするために使われます。なので、

module.exports = {
  // ...
  create (context) {
    return context.parserServices.defineTemplateBodyVisitor({
      // Event handlers for <template> ...
    }, {
      // Event handlers for scripts ...
    });
  }
}

こんな感じで良いはずです。

[kazupon]

@mysticatea
早速ありがとうございます！
第2引数に指定したら動作しました。
こちらのastのドキュメントには、 Event handlers for <script> と書いてあったので、てっきりSFCの<script>以外は使えないのかと思いました。

もし、ドキュメントがuncorrectなら、こちらでPR送っておきたいと思います。 :)

[kazupon]

こちら解決したので、閉じます。
ありがとうございました！