jest.config.jsや.eslintrc.jsで入力補完する

1 min read読了の目安(約1100字

jest.config.jsや.eslintrc.jsとかを書くときに入力補完したいなー、でもそのためだけにVisual Studio Codeの拡張入れたり、ts-nodeを導入してjest.config.tsにするのはやりすぎな気がするなー、と思っていました。

調べていたら、JSDocでTypeScriptの型定義を使えるとわかったのでメモ。

サンプル

jest.config.js
/** @type {import("@jest/types").Config.InitialOptions} */
const config = {
  preset: "foobar",
};
module.exports = config;
.eslintrc.js
/** @type {import("@typescript-eslint/experimental-utils").TSESLint.Linter.Config} */
const config = {
  extends: ["foobar"],
};
module.exports = config;

@typescript-eslint/experimental-utilsからインポートするのは微妙だけど他に良い感じのを見つけられなかった。

注意

module.exports = {} と直接exportする書き方にすると余計なものもサジェストされてしまいます。
objectではなくコードのブロックと見なされてしまうので無関係なglobalスコープのクラス名とかまで入力候補に出てきてしまいます。
一度変数に代入しましょう。

👎
/** @type {import("@jest/types").Config.InitialOptions} */
module.exports = {
  // objectではなくコードのブロックと見なされてしまうので関係ないものもサジェストされてしまう。
};

スクリーンショット

Visual Studio Code 1.55.0 で動作確認。

入力補完中のスクリーンショット

参考

https://qiita.com/kondei/items/2a53b433683e9fb0a718
https://jsdoc.app/tags-type.html