【VSCode おすすめ機能】InlayHintを活用してコードを快適に書こう 【TypeScript・JavaScript】

はじめに

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

InlayHintとは

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

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

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

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

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

使い方

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

• JavaScript › Inlay Hints › Enum Member Values

• JavaScript › Inlay Hints › Function Like Return Types

• JavaScript › Inlay Hints › Parameter Names

• JavaScript › Inlay Hints › Parameter Names(Suppress When Type Matches Name)

• JavaScript › Inlay Hints › Parameter Types

• JavaScript › Inlay Hints › Variable Types

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

• TypeScript › Inlay Hints › Enum Member Values
• TypeScript › Inlay Hints › Function Like Return Types
• TypeScript › Inlay Hints › Parameter Names
  • これはSelect形式なのでallを指定
• TypeScript › Inlay Hints › Parameter Names
• TypeScript › Inlay Hints › Parameter Types
• TypeScript › Inlay Hints › Variable Types
• TypeScript › Inlay Hints › Variable Types(Suppress When Type Matches Name)

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

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

特定のキーを押している間だけ表示する

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

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

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

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

おわりに

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

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