👀

GraphQL Code Generator で生成したファイルが VSCode に反映されない問題

2021/06/10に公開

GraphQL

TypeScript

tech

背景

GraphQL Code Generator を使うと GraphQL のスキーマから TypeScript のコードを生成してくれ型安全や補完の恩恵を受けて快適に開発ができるのですが、生成されたコードに対する import が VSCode 上でなかなか反映されないという問題があります。

生成したコードを開くか VSCode 自体をリロードすれば正しく認識してくれるためほんの数秒の手間なのでそこまで影響はないのですが、そのことについて README に書いたり新しく開発に関わるメンバーに「generated.ts 開いた？」という謎の初見殺しが発生してしまうことが問題でした。
（現在のプロジェクトでは monorepo で各パッケージ内の src/graphql/generated.ts にコード生成しています。）

対策

VSCode の設定の files.watcherExclude に GraphQL Code Generator が生成するファイルを glob 形式で指定します。
それ以外に指定されているのはデフォルトの設定です。

.vscode/settings.json

 {
   ...
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/node_modules/**": true,
+    "**/.hg/store/**": true,
+    "**/graphql/generated.ts": true
+  }
 }

設定を反映させるために、初回は VSCode を開き直す必要があります。

ワークスペースの設定として保存すると .vscode/settings.json に設定が保存されるので、これを Git にコミットすることでチーム全体でこの設定を使うことができます。

まとめ

地味に1年以上悩み続けていた問題だったのでひとまず解消できてよかったです。

Language Server に関する知識が甘いためちゃんとした理解はできていないのですが、 Prisma 2 が node_modules 配下にコードを生成するのはこれと同じような理由だというところまでは分かっていました。

最初見たときに「なぜにnode_modules配下に。。。」と思ったのですが、src配下だと、生成したコードがtsserver上で展開されると、更新＆再生成した際にtsserver上のファイルは古いままの状態になり、補完やエラーチェックの都合が悪いからだとか。

関連して調べていたところ、以下の issue で files.watcherExclude に関して言及されていたため、試してみたら問題が解消できました。

もし他の方法やツッコミなどがあったらぜひコメントをいただきたいです。

背景

対策

まとめ

Discussion