{language,extension}-independent VS Code inlay hint customization

Question

How can I can customize VS Code inlay hints in ways that are both language-independent and extension-independent?

I want to:

• customize when the inlays appear

• customize their visual style

• adjust these using either workspace or user settings

Motivation: So far, I haven't found brief, to-the-point, one-stop documentation for answering this. Hence this question and my answer below.

Terminological clarification: "Built-in" is not necessarily "language-independent". VS Code does offer some built-in settings relating to particular languages; since they are language-dependent, they are not in-scope for this question.

Context: I'm using VS Code version 1.81.

Answer 1

Customization

Here is a summary of the relevant settings.json options for VS Code, as of version 1.81.1 :

// options are: "on", "onUnlessPressed", "off", "offUnlessPressed"
"editor.inlayHints.enabled": "...",
 
"workbench.colorCustomizations": {
  // specify the theme you want to customize; e.g. Dark Modern
  "[Dark Modern]": {
    "editorInlayHint.foreground": "...",
    "editorInlayHint.background": "...",
    "editorInlayHint.typeForeground": "...",
    "editorInlayHint.typeBackground": "...",
    "editorInlayHint.parameterForeground": "...",
    "editorInlayHint.parameterBackground": "...",
  }
}

Resources

• VS Code API reference docs: theme colors
• VS Code issue #133673: customize inlay colors
• Rust Subreddit: changing inlay hint color

Answer 2

Builtin settings (at the time of this writing. see the settings UI or hover tooltips in settings.json for descriptions (though they're pretty self-explanatory)):

• editor.inlayHints.enabled
• editor.inlayHints.padding
• editor.inlayHints.fontFamily
• editor.inlayHints.fontSize
• editor.inlayHints.padding
• audioCues.noInlayHints

Builtin colour customization points (see the workbench.colorCustomizations setting):

• editorInlayHint.background
• editorInlayHint.foreground
• editorInlayHint.parameterBackground
• editorInlayHint.parameterForeground
• editorInlayHint.typeBackground
• editorInlayHint.typeForeground

You can find other related settings including those for built-in language extensions by searching "inlay hints" in the settings UI.