Inlay Hints

Code vision

Code vision hints display in the editor the number of inheritors and usages for a symbol, show who authored it, and mark symbols that are new or contain uncommitted changes.

When you hover over a hint, it turns into a link. By clicking the link you can navigate to usages or implementations of the class or interface as well as open Version Control annotations.

• Inheritors show the number of descendants of a class or an interface. Click the hint to jump to the descendants. If there are several implementations, select the relevant one from the list. Learn more from Go to implementation.

  

  By default, the Inheritors hints are enabled. To disable them, clear the checkbox.

  Alternatively, in the editor, hover over a hint and select Hide 'Code Vision: Inheritors' Inlay Hints or Hide All 'Code Vision' Inlay Hints from the context menu.

  

• Usages show how many times a class or a method is used in your project. Click the hint to jump to the usage or to select the relevant one from the list. Learn more from Search for usages in a project.

  

  See also Search for usages, Jump from declaration to usages.

  By default, the Usages hints are enabled. To disable them, clear the Usages checkbox in Settings | Editor | Inlay Hints | Code Vision.

  Alternatively, in the editor, hover over a hint and select Hide 'Code Vision: Usages' Inlay Hints or Hide All 'Code Vision' Inlay Hints from the context menu.

  

• Generate Documentation with AI - click this hint to invoke the Write Documentation AI action.

• Component usages are shown in Vue, Svelte, and Astro files. Click the hint to quickly look for usages of a specific component anywhere in the project.

  

  Gif

• Code author shows the person who edited a symbol last. Click the hint to open the Git annotations in the gutter. Learn more from Locate code author.

  

  Gif

In the right-hand pane of the dialog, configure the default position of inlay hints—whether they should be displayed above symbols or to the right of them—and specify the maximum number of inlay hints to be shown in each position.

You can also configure custom positioning for hints of a specific type.

Parameter names

Show the names of parameters in function and method calls. These hints provide assistance with passing correct arguments to functions and methods.

Select or clear the checkboxes to enable or disable inlay hints in specific language and syntax contexts. Use the interactive preview to the right to check whether the result meets your expectation.

For a number of methods and functions, parameter names are not shown by default: such methods and functions are on the default Exclude List. To re-enable the excluded parameter name hints, or add more excluded methods or functions, click Exclude list and edit the list.

Learn more from Parameter hints in JavaScript and Parameter hints in TypeScript.

Types

Show the types of variables, fields, parameters and function return types in the editor.

Select or clear the checkboxes to enable or disable inlay hints in specific language and syntax contexts. Use the interactive preview to the right to check whether the result meets your expectation.

Learn more from Return types in JavaScript, Type hints in JavaScript, Return type hints in TypeScript, Type hints in TypeScript.

Values

By default, this checkbox is selected and WebStorm shows inferred values for numeric enums in the TypeScript context. Clear the checkbox to hide the inferred values and show only the values of explicitly initialized constants.

Method chains

Show the return type of each method in a method chain. Hints are only displayed when methods are called at separate lines.

Other

• Docker run named stage: show an icon to quickly build or run a specific named stage in a Dockerfile.

• Table inlays: show horizontal and vertical bars around the table. Provides column and row actions.