View Function Definition Without Leaving File in VS Code

In Visual Studio Code, you can quickly inspect the source code of a function, class, or method without navigating away from your current working file. This article explains how to use the “Peek Definition” feature, its keyboard shortcuts for Windows, macOS, and Linux, and how to interact with the peek window to streamline your development workflow.

Using the Peek Definition Feature

The primary way to view a function’s definition inline is through the Peek Definition feature. This opens a temporary, scrollable window directly beneath the function call, showing its source code.

To trigger Peek Definition:

1. Place your cursor on the function name you want to inspect.
2. Use the following keyboard shortcut:
   • Windows / Linux: Alt + F12
   • macOS: Option + F12 (or ⌥ + F12)

Alternatively, you can right-click the function name and select Peek > Peek Definition from the context menu.

Viewing with Hover Preview

Another quick method is using the hover preview:

1. Hold down the Ctrl key (Windows/Linux) or Command (⌘) key (macOS).
2. Hover your mouse cursor over the function name.
3. A small tooltip will appear displaying the function’s implementation.

Editing Inside the Peek Window

The Peek Definition window is not read-only. You can click inside the peeked window and directly edit the definition’s code. Any changes you make will be saved directly to the source file where the function is defined, without you ever having to switch tabs.

Closing the Peek Window

To close the peek window and return to your main file, simply press the Escape (Esc) key on your keyboard, or click the “X” icon in the top-right corner of the peek window container.