35

I'm trying to work out the setting that enables these little inline annotations.

screenshot of new vscode insiders annotations

1

2 Answers 2

48

Those are Inlay Hints. You can enable (the default) or disable them with the setting:

Editor > Inlay Hints: Enabled

or change the Font Family or Font Size by searching for Inlay Hints in the Settings UI.

And there is finer control for parameter names/types, variable types and more for js/ts files.

For a lot more, see the release notes v1.60 release notes:

The most significant new tooling feature in TypeScript 4.4 is inlay hint support. Inlay hints add additional inline information to source code to help you understand what the code does.

Parameter name inlay hints for example show the names of parameters in function calls:

parameter inlay hints

This can help you understand the meaning of each argument at a glance, which is especially helpful for functions that take Boolean flags or have parameters that are easy to mix up.

To enable parameter name hints, set javascript.inlayHints.parameterNames.enabled or typescript.inlayHints.parameterNames.enabled settings. There are three possible values:

  • none — Disable parameter inlay hints.
  • literals — Only show inlay hints for literals (string, number, Boolean).
  • all — Show inlay hints for all arguments.

In addition, VS Code also offers inlay hints that show implicit type information in your JavaScript and TypeScript code.

Variable type inlay hints show the types of variables that don't have an explicit type annotations.

Settings - javascript.inlayHints.variableTypes.enabled and typescript.inlayHints.variableTypes.enabled

variable type inlay hints

[And more at the release notes link.]

5
  • Also see a vscode team member's explanation of inlay hints: stackoverflow.com/questions/68946903/…
    – Mark
    Commented Sep 2, 2021 at 18:17
  • Important: Even though this answer does mention there are separate JS and TS options I didn't get that far - so it took me way too long to discover I was enabling JS settings instead of TS. I also had to restart VS Code to get any of them to take effect the first time. Commented Nov 5, 2021 at 4:56
  • How do we change style of these things? They are way to intrusive and distracting..
    – vanowm
    Commented Dec 11, 2021 at 14:08
  • 3
    Found it: "workbench.colorCustomizations": { "editorInlayHint.background": "red", "editorInlayHint.foreground": "black" },
    – vanowm
    Commented Dec 11, 2021 at 14:19
  • 1
    @vanowm You should write an answer, since your comment is much better than this accepted answer.
    – Déjà vu
    Commented Oct 6, 2022 at 8:22
6

In additional to the accepted answer, if you want to change the color, it's editorInlayHint keys inside of workbench.colorCustomizations:

"workbench.colorCustomizations": {
  "editorInlayHint.background": "red",
  "editorInlayHint.foreground": "black"
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.