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

19 Nov 2023

3 min read

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 current file you have opened has the file name on the editor tab and in the titlebar,
• The minimap shows your position in the current file in a floating graphical map,
• The Explorer pane in the sidebar shows you the filetree of your workspace with your current file highlighted,
• There are coloured brackets pairs and colored guidelines that outline the extent of scopes,
• You can have breadcrumbs (breadcrumbs.enabled setting) that outline the scope of your position within the current 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!

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:

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.

Tagged

• vscode