WebStorm 2024.1 Help

Inlay Hints

Inlay hints appear in the editor and provide you with additional information about your code to make it easier to read and navigate.

Enable or disable inlay hints

  • Open the Settings dialog (Ctrl+Alt+S) , go to Editor | Inlay Hints, expand the groups of inlay hints, and clear the checkboxes next to the hints that you want to hide or show.

  • In the editor, right-click a hint and select whether you want to disable the specific type of hints or all hints in this category.

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.

    Inlay hints, code vision: jump to an inheritor

    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.

    Hide Inheritors hints in the editor
  • 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.

    Inlay hints, code vision: jump to usages

    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.

    Disable Usages inlay hints in the editor
  • 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.

    Show Component Usages
  • 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.

    Inlay hints, code vision: code author

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.

Code vision: configure default settings

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

Configure position for inlay hints in the Settings dialog

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.

Inlay hints: parameter names

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.

Inlay hints: types

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.

Disable inlay hints

  • Open the Settings dialog (Ctrl+Alt+S) , go to Editor | Inlay Hints, expand the groups of inlay hints, and clear the checkboxes next to the hints that you want to hide.

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

    Disable Usages inlay hints in the editor

Change inlay hints appearance

  1. In the Settings dialog (Ctrl+Alt+S) , go to Editor | Color Scheme | Language Defaults, then select Inline hints.

  2. Select the inlay hint type and state, and configure the font color and effects as required.

Last modified: 10 April 2024