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