🗃

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

2021/04/22に公開
14

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

使い方

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

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

export default config // もしくは module.exports = config
これはダメ
/** @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 のインストールは不要でした。

Discussion

pvcresinpvcresin

stylelintは/** @type {import('stylelint').Configuration} */でいけそうです。

jay-esjay-es

ありがとうございます!後ほど追加しておきます🙏

高梨ギンペイ高梨ギンペイ

export 系へ直接付ける場合も、右辺を括弧 () で括るとキャストされ補完が利くようになります。

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

こちらです:

https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#casts

jay-esjay-es

ありがとうございます!
コメントの内容を記事に反映させていただきました🙏

ꂢ ꅑ 𐓃 ₂ ꤿ ꤵ 𑜅 ꤾꂢ ꅑ 𐓃 ₂ ꤿ ꤵ 𑜅 ꤾ

どのバージョンからそうなったかはわかりませんが、Next.js v11.1.2

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

ありがとうございます。記事に反映させていただきました🙏
だいぶシンプルになりましたね。

u-shou-sho

prettier ですが、

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

だと override オプションも補完が効きます。

また eslint ですが、@typescript-eslint 系を入れずとも

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

でも補完が効きます(types.js の中で ScopeManager が未定義なので sharable config 等を作る際には使わない方が良さそうですが)

jay-esjay-es

コメントありがとうございます! 記事に追加させていただきました🙏

koyashirokoyashiro

いつ変更されたのかはわかりませんが、最新の Stylelint 15.11.0 では設定ファイルの型は Config でした。
一応ご報告しておきます。

https://github.com/stylelint/stylelint/blob/15.11.0/types/stylelint/index.d.ts#L91-L112

stylelint.config.js
- /** @type {import('stylelint').Configuration} */
+ /** @type {import('stylelint').Config} */
jay-esjay-es

ご報告ありがとうございます! 記事に追加させていただきました🙏

つるくもつるくも

TailwindCSSの設定ファイルの型はバージョン3.1.0でtailwindcss本体に取り込まれたので、@types/tailwindcssはインストールしなくても良いようです。

参照

tailwind.config.js
- /** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
+ /** @type {import('tailwindcss').Config} */
jay-esjay-es

コメントありがとうございます! 記事に反映させていただきました🙏