いろいろな .config.js で型の補完を効かせる方法まとめ

3 min read読了の目安(約3100字 4

いろいろな JavaScript 系ライブラリの設定ファイルで型の補完が効くようにするための JSDoc アノテーションまとめです。VSCode で確認しています。
リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。
他のライブラリの情報もコメント大歓迎です!

更新履歴

  • 2021/04/30 stylelint.config.js を追加
  • 2021/05/05 「使い方」を改訂

使い方

設定オブジェクトの変数を定義する際に JSDoc で型を指定し、その変数をエクスポートします。

xxx.config.js
/** @type {設定オブジェクトの型を指定} */
const config = {
  // ここで型の補完が効くようになる
}

export default config // もしくは module.exports = config

export defaultmodule.exports に直接コメントをつける場合はオブジェクトを () で囲む必要があります。

これはダメ
/** @type {設定オブジェクトの型を指定} */
export default {
  // これだと型の補完は効かない
}
これならOK
/** @type {設定オブジェクトの型を指定} */
export default ({
  // ここで型の補完が効くようになる
})

↑ @ginpei さんにコメントで教えていただきました。ありがとうございます🙏

Prettier を使っている場合は、丸括弧が消されないように以下の順番にするとよいでしょう(JSDoc コメントの後に改行を入れても OK)。

これでもOK
export default /** @type {設定オブジェクトの型を指定} */ ({
  // ここで型の補完が効くようになる
})

設定ファイルごとの型定義

babel.config.js

babel.config.js
/** @type {import('@babel/core').TransformOptions} */

.eslintrc.js

別途 @typescript-eslint/experimental-utils のインストールが必要です。
@typescript-eslint/eslint-plugin@typescript-eslint/parser を使用している場合は一緒にインストールされているので不要です)

.eslintrc.js
/** @type {import('@typescript-eslint/experimental-utils').TSESLint.Linter.Config} */

ref. https://zenn.dev/mstssk/articles/13c5e7c0377899

jest.config.js

jest.config.js
/** @type {import('@jest/types').Config.InitialOptions} */

ref. https://zenn.dev/mstssk/articles/13c5e7c0377899

next.config.js

next.config.js
/** @type {import('next/dist/next-server/server/config-shared').NextConfig} */

nuxt.config.js

nuxt.config.js
/** @type {import('@nuxt/types').NuxtOptions} */

ref. https://zenn.dev/k_u_0615/articles/74d093680a63ce19650b

.prettierrc.js

.prettierrc.js
/** @type {import('prettier').Options} */

rollup.config.js

rollup.config.js
/** @type {import('rollup').RollupOptions} */

stylelint.config.js

stylelint.config.js
/** @type {import('stylelint').Configuration} */

↑ @pvcresin さんにコメントで教えていただきました。ありがとうございます🙏

tailwind.config.js

別途 @types/tailwindcss のインストールが必要です。

tailwind.config.js
/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */

ref. https://zenn.dev/ryonakae/articles/a0ba5ab7fd7a03

vetur.config.js

別途 vls のインストールが必要です。

vetur.config.js
/** @type {import('vls').VeturConfig} */

ref. https://vuejs.github.io/vetur/guide/setup.html#advanced

vite.config.js

vite.config.js
/** @type {import('vite').UserConfig} */

または defineConfig 関数を使うと JSDoc なしで型の補完が効くようになります。

vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // ...
})

ref. https://vitejs.dev/config/#config-intellisense

vue.config.js

vue.config.js
/** @type {import('@vue/cli-service').ProjectOptions} */

ref. https://cli.vuejs.org/config/#vue-config-js

webpack.config.js

webpack.config.js
/** @type {import('webpack').Configuration} */

ref. https://qiita.com/akameco/items/e12377e55e379d29636e
2021 年 4 月現在、型定義ファイルが同梱されるようになっており、@types/webpack のインストールは不要でした。