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

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

更新履歴

• 2021/04/30 stylelint.config.js を追加
• 2021/05/05 「使い方」を改訂
• 2021/09/16 next.config.js を更新
• 2021/12/31 .eslintrc.js, .prettierrc.js を更新
• 2023/12/04 stylelint.config.js を更新
• 2024/07/06 eslint.config.js を追加。tailwind.config.js を更新

使い方

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

xxx.config.js

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

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

export default や module.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} */

eslint.config.js

eslint.config.js

/** @type {import('eslint').Linter.FlatConfig[]} */

.eslintrc.js

.eslintrc.js

/** @type {import('eslint/lib/shared/types').ConfigData} */

↑ eslint 内に定義されている旨、@u-sho さんに教えていただきました。ありがとうございます🙏

以前の内容

別途 @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').NextConfig} */

ref. https://nextjs.org/docs/api-reference/next.config.js/introduction
↑ 現行のバージョンで変更されている旨 @sno2wman さんにコメントで教えていただきました。ありがとうございます🙏

v11.0以前

/** @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} */

↓ 新しめの型定義（2021年11月以降?）では .Config が追加され、override も補完できるようです。@u-sho さんありがとうございます🙏

.prettierrc.js

/** @type {import('prettier').Config} */

rollup.config.js

rollup.config.js

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

stylelint.config.js

stylelint.config.js

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

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

↓ 新しめの型定義では Config に変更されているようです。@koyashiro さんありがとうございます🙏

stylelint.config.js

/** @type {import('stylelint').Config} */

tailwind.config.js

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

tailwind.config.js

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

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

↓ v3.1.0 以降は tailwindcss 本体に定義されている旨、@zurukumo さんに教えていただきました。ありがとうございます🙏

tailwind.config.js

/** @type {import('tailwindcss').Config} */

ref. https://tailwindcss.com/docs/configuration

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 のインストールは不要でした。