🥶

VisualStudioCodeでホバー時のTypeScriptの型ヒントをすべて表示したかったけど詰まった話

2024/10/17に公開

はじめに

Visual Studio Code(以下、VSCode)でTypeScriptの型ヒントをすべて表示する方法について、2件の参考記事を見て試してみましたが、一部で詰まってしまいました。そこで、私が実際にできた方法を補足して共有します。

参考記事:
https://zenn.dev/karan_coron/articles/dcab49bed5b2ff
https://qiita.com/fukasawah/items/2f8b37db8eb711448cd8

環境

  • mac Apple M1 (Sonoma 14.5)
  • VSCode

やるべきこと

結論から言うと、VSCodeが管理するTypeScript用の言語サーバで参照されているデフォルトの表示上限を変更すればよいのです。具体的には、var defaultMaximumTruncationLength = 160という記述を見つけ、それを1600などに変更することで、型ヒントがすべて表示されるようになります。

詰まった部分

defaultMaximumTruncationLengthが見つからねえ!!
参考記事を見ても、私にはこの設定が見つけられませんでした。

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js

おそらく、このファイルにアクセスすることで確認できるはずですが、検索してもdefaultMaximumTruncationLengthが見つかりませんでした。

アクセス方法は、普通にcdコマンドでも良いですし、アプリケーションを右クリックして**「パッケージの内容を表示」**から愚直にアクセスしてエディタで確認することもできます。

アクセス方法

解決方法

私の場合、以下のファイルに記述がありました:
/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/typescript.js

tsserver.jsではなく、typescript.jsファイルの中を検索することでdefaultMaximumTruncationLengthの記述が見つかりました。ここを1600に変更すると、今まで省略されていた部分の型情報が表示されるようになりました。

あとがき

おそらく、"noErrorTruncation": trueでも型ヒントが表示されるようになりますが、その場合は、プロジェクトごとにtsconfig.jsonを編集し、それを.gitignoreに含める必要があります。プロジェクト共通の設定であれば問題ありませんが、私は個人設定で済ませたかったので、上記の方法を取りました。

参考記事を書いてくださった皆様、本当に助かりました。ありがとうございました。

Discussion