vue.config.js/nuxt.config.jsで補完を効くようにする

同様の記事をQiitaにもあげてます

---

※ vscodeでの開発が前提です

vue.config.jsの場合

• @vue/cli 4.5.8 でvue createした環境で確認
  • Vue2 / Vue3 どちらでもOK

vue.config.js

/**
 * @typedef { import("@vue/cli-service").ProjectOptions } Options
 * @type { Options }
 */
const option = {
  // ここに補完が効くようになる
};

module.exports = option;

↑こんな感じになると思います

nuxt.config.jsの場合

• nuxt 2.14.6 と @nuxt/types 2.14.6 で確認

nuxt.config.js

/**
 * @typedef { import("@nuxt/types").NuxtOptions } NuxtOptions
 * @type { NuxtOptions }
 */
const option = {
  // ここに補完が効くようになる
};

export default option;

↑こんな感じになると思います

@nuxtjs/vuetify を使ってる場合は以下のように書きます

nuxt.config.js

import colors from "vuetify/es5/util/colors";

/**
 * @typedef { import("@nuxt/types").NuxtOptions } NuxtOptions
 * @typedef { import("vuetify/types/services/presets").VuetifyPreset } VuetifyPreset
 * @type { NuxtOptions & { vuetify?: Partial<VuetifyPreset> } }
 */
const option = {
  // ここに補完が効くようになる
};

export default option;

nuxt.config.jsでの注意点

上記の@nuxtjs/vuetifyのように、nuxtプラグインの設定は自分で型を定義する必要があり、まあまあめんどくさいです。

まとめ

configファイルをtsで書く選択もあるみたいですが、補完が効くなら個人的にはjsの方が気軽だなと思います。
わざわざうる覚えの設定をいちいちググるのもめんどくさいですし。

関連記事

• webpack.config.jsで補完を効くようにする - Qiita
  • ちょっと前に書いたしたやつ　(これ書いたからすっかりvue.config.jsのも書いていたと思っていました、、)