CODEWITHSUNDEEP
visual-studio-code
keyboard
keyboard

Reputation: 2355

VSCode - Is it possible to always show the current function name or scope somewhere at the top?

It would be very useful for editing JavaScript or TypeScript to always see the current function name at the top (like Xcode does for example). Sometimes when editing a long function (or having larger parts of the screen obscured with the console), it would be very useful to be able to verify that I'm actually in the correct function / to know in which function I am at the moment.

Is that possible?

Upvotes: 30

Views: 16182

Answers (2)

Mark
Mark

Reputation: 180651

Another way to "pin" the current function definition to the top of the editor is with sticky scroll.

Sticky scroll is a feature that shows the current scope at the top of the view port.

This was introduced in v1.70 and is still undergoing improvements. And is currently under an experimental setting so expect some changes.

In v1.71 it will no longer be "experimental" and so the setting will become:

Editor > Sticky Scroll: Enabled

Until v1.71 comes out here is the current information:

First enable this setting: Editor > Experimental > Sticky Scroll: Enabled

There will be a toggle command to show/hide the sticky scroll lines: editor.action.toggleStickyScroll

sticky scroll demo

Clicking on that sticky function definition will take you to the top of the function.

Control/command click in the sticky scroll will take you to the definition.

Another demo from the v1.70 Release Notes: Sticky Scroll

sticky scroll demo2

Currently you can modify the background color and shadow color with these colorCustomizations in your settings.json:

"workbench.colorCustomizations": {
  "editorStickyScroll.background": "#444",
  "editorStickyScrollHover.background": "#f00",
  "scrollbar.shadow": "#fff9"      // with a little opacity for the dropShadow
},

There is a related setting:

Editor > Experimental > Sticky Scroll: Max Line Count
Defines the maximum number of sticky lines to show

Default for above is 5.

Upvotes: 38

Matt Bierner
Matt Bierner

Reputation: 65175

This was added with VS Code 1.26. It is called breadcrumbs

Breadcrumbs are enabled by default for languages with advanced support. This includes JS/TS, html, and css out of the box. Extensions can add support for more languages

Upvotes: 6

Related Questions