⌨️
jest.config.jsや.eslintrc.jsで入力補完する
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 で動作確認。
参考
2021/06/16 追記
jest.config.jsについては、ts-jestのドキュメントに /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ を使うTipが載っていました。
jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = config = {
// [...]
globals: {
'ts-jest': {
// ts-jest configuration goes here and your IDE will suggest which configs when typing
},
},
}
Discussion