一日一処: VueやNuxtのscriptタグでTypeScriptを必須にしたい

Vue

VueはReactと異なり、HTML部分(template)、CSS部分(style)、そしてJavaScript部分(script)で構成されている。このようにそれぞれが分離することで、記述が容易で初心者にも優しくわかりやすいと言われている側面もある。そして、VueでもTypeScriptによるプログラミングが可能だ。

TypeScriptの有効化

Vueにしろ、Nuxtにしろ、TypeScriptによるプログラミングが可能だ。ただし、それぞれの設定において、言語設定(scriptタグのlang属性)を必須とする仕組みとする方法はない。できれば、設定ファイルにて、その有効化ができる術があるとよいのだが、私はそれを見つけることができなかった。もし、今回紹介する方法以外に知っている人がいれば教えてほしい。

TypeScriptの必須化

それぞれでESLintを導入していれば、これは非常に簡単だ。eslint-plugin-vueをESLintに組み込むだけだ。
vue/block-lang
これを用いて以下のように設定を行えば、ESLintでの検証時に、エラーが出力されるようになる。

{
  "vue/block-lang": ["error",
    {
      "script": {
        "lang": "ts"
      }
    }
  ]
}

至って簡単だ。同じ様にstyleタグでのlang設定も有効だ。scssを標準にしたい場合は、同様の設定を追加すればいい。
このESLintの設定にたどり着くまでに若干時間を要した。VueやNuxtの設定側でコンパイル時に検査をしてくれるだろうという先入観から、アプリケーションそのものの設定を調査していたからだ。コードそのもののチェックをするという点では、ESLintのため、これを理解していれば、この方法にたどり着くのはもっと早かっただろう。ちなみに、この方法にたどり着いたのは、公式のルールドキュメントではなく、How to enforce lang="ts" in script tags with an ESLint rule in Vueという文字通りのStackoverflowの記事だった。