`@vue/tsconfig`を使ってVue.jsを使用するプロジェクトのTypeScriptの設定をいい感じに行うMEMO📝

TypeScriptを設定周り毎回新しいプロジェクトを作成するときに迷うので以下のようなコミュニティが提供しているような設定を使いたいなぁという気持ちになるのですが、

github.com

Vue.jsのものは無さそうで(Nuxt用のはある)、いい感じのものが無いかなと思ったらVue.js公式のものがあったので使い方とかをメモ📝

github.com

@vue/tsconfig の使い方

使い方は簡単でリポジトリ記載の通り、以下でinstallしたあとに

// npm
npm install -D @vue/tsconfig
// yarn
yarn add -D @vue/tsconfig

tsconfig.jsonでextendしてあげるだけです。

{
  "extends": "@vue/tsconfig/tsconfig.web.json"
}

公式Guideによるとcreate-vueの構成相当のようです 📗

Projects scaffolded via create-vue include pre-configured tsconfig.json. The base config is abstracted in the @vue/tsconfig package. Using Vue with TypeScript | Vue.js

無効化したり変更したい値があればtsconfig.jsonで上書きしてあげれば大丈夫です。

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "compilerOptions": {
    "lib": ["DOM", "ES2020"]
    "target": "ES2015",
    "types": ["node", "jest"],
  }
}

おわりに

こういう設定周り、独自でメンテしているとベストプラクティスから逸脱してたり、バージョンアップで対応が漏れたりと割と大変なこともあったりするのでコミュニティで推奨されているものが公開されていれ、それが利用できるのは良いですね✨

参考

zenn.dev

vuejs.org