VS Code - Sticky code sections for improved contextual browsing (sticky scroll)

VS Code - Sticky code sections for improved contextual browsing (sticky scroll)

We read more code than we write is a common refrain, but have you optimized VS Code for reading code? A telltale sign that things are subpar is if you find yourself scrolling around and looking around the UI regularly to re-establish the context of the code you are examining, absentmindedness excepted! You feel silly asking yourself - where am I again? 😵‍💫

One impactful aid is sticky headings that outline the scope of your position in a file. Let’s see if it can make a difference.

First, let’s take a quick look at what aids VS Code provides for establishing your current context.

Establishing your current context in VS Code

VS Code provides a number of visual aids to communicate where you are in your codebase and what scope you are operating in:

The floating minimap of VS Code for a JavaScript file.
The floating minimap (right-hand side) shows your position in the file.

The bit for me that is not done well is having an overview of my scope within a file - what is the scope of the code I am currently examining? I find that breadcrumbs are crumby (pardon the pun) for recognizing the current scope in some languages. The breadcrumb trail becomes too long and text gets truncated.

The sticky scroll setting

There is a nice setting called editor.stickyScroll.enabled that pins lines to the top of a file to give an overview of the current scope. Let’s browse a HTML file with the setting enabled and see how it works. As you scroll down, every unterminated element has the line with its opening tag pinned as a sticky heading:

This displays your current context in an easy to digest way. Having prettily formatted code and sticky headings together works well in my opinion. I really appreciate it when I have to deal with messy HTML files!

Demonstration of the editor.stickyScroll.enabled setting on a HTML file.

You can compare the appearance of the breadcrumbs to the sticky headings in the screenshot above. I prefer the sticky headings.

Here is what it looks for a JavaScript file within a fetch closure:

Demonstration of the editor.stickyScroll.enabled setting on a JavaScript file. You can see 2 function defintions are stuck as the top 2 lines. The first is the fetch closure, and the second is the inner function that I am currently in.

You can see 2 function definitions are stuck as the top 2 lines. As you scroll down whenever there is a nested scope such as a loop, it’s declaration line will become stuck also. There are some exceptions, I noticed for JavaScript a plain old for loop does not stick, but a forEach() does!

To get this behaviour for all languages, you can add the following to your settings.json:

	"editor.stickyScroll.enabled": true,

So far, I like to have this in every language I use. If you don’t want it for a particular language, you can disable it using the multiple language-specific syntax. For example, the following disables sticky scrolling for HTML and XML:

	"[html][xml]": {
"editor.stickyScroll.enabled": false,

You can limit the number of sticky lines with the editor.stickyScroll.maxLineCount setting. The default value is 5.