はじめに

今回は、VSCodeのおすすめ機能、InlayHintについて紹介していこうと思います。

InlayHintとは

みてもらった方が早いので、以下の画像をご覧ください。

これはjsのファイルですが、変数や関数の引数に薄灰色で型情報などが表示されています。

このように、インラインでレンダリングされるソースコードに関する追加情報のことをInlayHintといいます。

これが表示されていると、関数の引数の順番を間違えることが少なくなったり、変数に意図しない型が入ってしまっているのが視覚的に検知できて助かることがままありますので設定することをお勧めします！

後述しますが、邪魔だという方は特定のキーを押している間だけ表示することもできますので、設定するだけしておいても良いと思います！

VScodeの設定でinlayHintsと検索し、以下の項目にチェックをつけます。
項目ごとにサンプル画像を貼ってくれているので、必要だと思う項目を選びましょう。

TypeScriptを使用している場合は以下もチェックをつけます。

これでts,jsファイルに戻ると、薄灰色の表示がされているはずです！

もし、表示されていない時はeditor.inlayHints.enabledがONになっているか確認してみてください。

前述した、特定のキーを押している間だけ表示する方法についても紹介します。

VSCodeの設定で、editor.inlayHints.enabledを検索します。

Editor › Inlay Hints: Enabledという項目が出てきますので、SelectでoffUnlessPressedを選択します。

こうすることで、普段は表示せず、Ctrl+Optionを押している間だけInlayHintsを表示することができます！

最後までお読みいただきありがとうございました！

こういった設定で、コーディングにかける時間を少しずつでも減らして効率を上げていきたいですね！