Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does anybody know the name of this setting inside of VS Code Insiders? For grayed out parameter and variable annotations

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

screenshot of new vscode insiders annotations

like image 774
glo Avatar asked Aug 10 '21 01:08

glo


People also ask

What are inlay hints in VS code?

Inlay hints add additional inline information to source code to help you understand what the code does. 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.

What are inlay hints?

Inlay hints are special markers that appear in the editor and provide you with additional information about your code, like the names of the parameters that a called method expects. Other types of hints inform you about annotations, method parameters, usages, and so on (depending on the language).

What is TS file in Visual Studio?

TypeScript in Visual Studio Code. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.


1 Answers

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 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.]

like image 75
Mark Avatar answered Oct 11 '22 02:10

Mark