VSC(Visual Studio Code) TypeScript Inlay hints

Inlay hints(公式ページ)

設定したパラメータ

設定説明
typescript.inlayHints.enumMemberValues.enabled列挙型メンバーの値をエディタ上にインラインで表示します。これにより、列挙値の実際の値が確認しやすくなります。
typescript.inlayHints.functionLikeReturnTypes.enabled関数やメソッドなど、関数ライクなコード要素の戻り値のタイプをインラインで表示します。型推論による戻り値も明示的に確認できるため、コードの読みやすさが向上します。
typescript.inlayHints.parameterNames.enabled関数呼び出し時に引数の横にパラメータ名をインラインで表示します。ここでは全ての引数に対して名前が表示され、どの値がどのパラメータに対応しているかを把握しやすくなります。
typescript.inlayHints.parameterNames.suppressWhenArgumentMatchesName関数呼び出し時、引数の名前とパラメータ名が一致する場合はそのヒント表示を抑制します。冗長な表示を避け、必要な場合のみ追加情報を提供します。
typescript.inlayHints.parameterTypes.enabled関数宣言時に各パラメータの型情報をインラインで表示します。これにより、関数定義の時に各パラメータの型をすぐに確認できます。
typescript.inlayHints.propertyDeclarationTypes.enabledクラスやオブジェクトのプロパティ宣言の型情報をインラインで表示します。型が明示されていない場合でも推論された型が確認できます。
typescript.inlayHints.variableTypes.enabled変数宣言時に型情報をインラインで表示します。変数の型が明示されていなくても補助的な情報として表示されます。
typescript.inlayHints.variableTypes.suppressWhenExpressionIsLiteralリテラル(例えば、文字列や数値など)の場合、冗長な型のヒント表示を抑制します。よりシンプルにして不要な情報の表示を防ぎます。
typescript.inlayHints.enabled上記の各種 inlay hint 機能全体を有効にします。

設定ファイル

DevContainerを利用する前提で以下のファイルに追加する。

.devcontainer/devcontainer.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
  "name": "React Router v7",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bullseye",
  "runArgs": ["--name", "vsc-typescript-inlay-hints"],
  // Features to add to the dev container. More info: https://containers.dev/features.
  "features": {
    "node": {
      "version": "v22.13.0"
    }
  },
  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],
  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "yarn install",
  // Configure tool-specific properties.
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      "settings": {
        "eslint.nodePath": "./node_modules",
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[typescript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit",
          "source.organizeImports": "explicit"
        },
        // github coplot setting
        "github.copilot.chat.completionContext.typescript.mode": "on",
        "github.copilot.chat.languageContext.typescript.enabled": true,
        // typescript setting
        "typescript.inlayHints.enumMemberValues.enabled": true,
        "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
        "typescript.inlayHints.parameterNames.enabled": "all",
        "typescript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
        "typescript.inlayHints.parameterTypes.enabled": true,
        "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
        "typescript.inlayHints.variableTypes.enabled": true,
        "typescript.inlayHints.variableTypes.suppressWhenExpressionIsLiteral": true,
        "typescript.inlayHints.enabled": true,
        "cSpell.files": ["!package.json"]
      },
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": [
        "dbaeumer.vscode-eslint",
        // 共通
        "esbenp.prettier-vscode",
        "mhutchie.git-graph",
        "eamodio.gitlens",
        "usernamehw.errorlens",
        "oderwat.indent-rainbow",
        "aaron-bond.better-comments",
        "streetsidesoftware.code-spell-checker"
      ]
    }
  }
  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}