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

We read more code than we write. It is worthwhile considering if you have VS Code optimized for reading code. A telltale sign that things are subpar is if you find yourself scrolling up and down to re-establish the context of the code you are examining, absentmindedness excepted! 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 makes 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 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 floating minimap (righthand side) in VS Code 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 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. You will really appreciate it when you have messy HTML files!

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.