How Can I Toggle Inlay Hints in Visual Studio Code?

Web Development
1

How Can I Toggle Inlay Hints in Visual Studio Code?
How Can I Toggle Inlay Hints in Visual Studio Code?1120×1120 57.7 KB

Visual Studio Code (VS Code) is a powerful and highly customizable code editor used by millions of developers. One of its newer productivity-enhancing features is Inlay Hints. These are small annotations displayed in the editor that provide helpful context such as parameter names, inferred types, and return values — directly inline with your code.

In this blog post, we’ll explore what Inlay Hints are, why they matter, and how you can easily toggle them in Visual Studio Code based on your language and preference.

What Are Inlay Hints?

Inlay Hints are small, non-intrusive text elements that VS Code can display inline with your code to help you understand what’s going on. These hints don’t affect the actual code and are not saved to the file. Instead, they serve as contextual helpers.

Common Inlay Hint Types:

  • Parameter Names (e.g., add(x: 5, y: 10))
  • Inferred Types (e.g., let name: string)
  • Return Types
  • Enum or Constant Values

Supported in languages like TypeScript, JavaScript, Python, C#, C++, Rust, Go, and others (depending on the language server).

Why Use Inlay Hints?

Here’s why Inlay Hints are useful:

  • Readability: Makes it easier to understand functions and return types without needing to navigate to definitions.
  • Less Cognitive Load: Helpful when revisiting unfamiliar or older codebases.
  • Better Learning: Great for beginners to understand how the code works and what types are inferred.
  • Debugging Help: Instantly shows you how values are being interpreted.

How to Toggle Inlay Hints in VS Code

Toggling Inlay Hints in Visual Studio Code can be done in multiple ways, depending on your preference.

Method 1: Use the Command Palette

  1. Open Command Palette:
    • Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
  2. Type:
     Toggle Inlay Hints
  1. Select Editor: Toggle Inlay Hints from the list.

This will immediately toggle inlay hints on or off globally for supported languages.

Method 2: Modify Settings JSON

For fine-grained control, edit your settings.json:

  1. Open Settings (JSON view):
  • Press Ctrl+Shift+P → Type Preferences: Open Settings (JSON)
  1. Add or modify entries like the following (for TypeScript/JavaScript):
{
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.enumMemberValues.enabled": true
}

To disable all inlay hints, set each value to false or "none".

Method 3: Use Settings UI

  1. Press Ctrl+, or go to File > Preferences > Settings.
  2. Search for:
Inlay Hints
  1. You’ll see toggles for various options based on installed language extensions.

This is a user-friendly way to enable or disable specific hint types (e.g., parameter names, inferred return types).

Example for Python

Python support for inlay hints comes from the Pylance extension.

To enable or configure inlay hints for Python:

{
  "python.analysis.inlayHints.variableTypes": true,
  "python.analysis.inlayHints.functionReturnTypes": true
}

Make sure Pylance is installed and selected as the Python language server.

Language-Specific Support

Different languages have different support for inlay hints. Below are a few examples:

Language Extension Required Hint Support Available
TypeScript Built-in Full support
JavaScript Built-in Full support
Python Pylance Variable + return types
C# C# for VS Code With Roslyn hints
Rust rust-analyzer Type hints, lifetimes
Go Go extension Type and parameter hints

Always make sure the language extension supports inlay hints and is updated.

Disabling Inlay Hints Completely

If you want to disable all hints across all languages:

  1. Open settings.json
  2. Add:
{
  "editor.inlayHints.enabled": "off"
}

Options for this setting:

  • "on" — Always show inlay hints
  • "off" — Always hide inlay hints
  • "auto" — Show based on editor focus or context

Summary

Feature Description
Inlay Hints Inline contextual annotations
Toggle Methods Command Palette, Settings UI, settings.json
Language Support Varies per extension
Use Cases Readability, debugging, learning

Inlay hints are a subtle but powerful addition to your coding workflow. Whether you’re trying to improve code clarity, learn a new language, or debug more efficiently, inlay hints can help.

Final Tips

  • Use Command Palette for quick toggling.
  • Adjust per-language settings to avoid clutter.
  • Keep your language extensions updated to get the latest inlay hint features.