What is Peek Definition in VS Code?

Visual Studio Code’s “Peek Definition” is a powerful productivity feature that allows developers to view and edit code defined in another file or location without leaving their current line of text. This article explains what the Peek Definition feature does, how it differs from similar navigation tools, and how to use it to maintain a seamless coding workflow.

Understanding Peek Definition

When reading or debugging code, you will often encounter functions, variables, or classes defined in other parts of your project. Standard navigation usually requires you to open the definition file, which disrupts your focus and litters your workspace with open tabs.

The Peek Definition feature solves this problem by opening a temporary inline window directly beneath the selected code symbol. This window displays the source code of the definition, allowing you to quickly inspect its logic and parameters.

Key aspects of this feature include:

• Inline View: The definition is displayed in a collapsible container directly below your cursor, keeping your current file active.
• Direct Editing: You can edit the code inside the peek window. Any changes made are immediately saved to the source file where the symbol is defined.
• Multi-Definition Support: If a symbol has multiple definitions across your workspace, VS Code displays a list on the right side of the peek window, letting you toggle between them easily.

Peek Definition vs. Go to Definition

While they sound similar, these two features serve different navigation needs:

• Go to Definition (F12): This action takes your cursor directly to the file and line where the symbol is defined, opening a new tab if necessary.
• Peek Definition (Alt + F12): This action keeps you in your current file and displays the definition within an embedded window, preventing you from losing your place.

How to Use Peek Definition in VS Code

You can trigger the Peek Definition window using keyboard shortcuts or the context menu:

• Windows / Linux: Select the code symbol and press Alt + F12.
• macOS: Select the code symbol and press Option + F12.
• Mouse Navigation: Right-click the symbol and select Peek -> Peek Definition from the context menu.

To close the peek window, simply press the Escape key or click the X in the top right corner of the inline box.