移転しました。

約3秒後に自動的にリダイレクトします。

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

Viibarのエンジニアの id:mstssk です。

つい先日、ここ1年ほど作ってきた新サービスVideoTouchを公開しました。

videotouch.jp

TypeScriptを使っている部分ではJestでテストしたり、ESLintを使っています。 それらのコンフィグファイルを書いていて、もどかしかった部分を簡易的に改善する方法を知ったので記事にしてみます。


※この記事はZennにも投稿しています。

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 で動作確認。

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

参考

qiita.com

jsdoc.app