VS Code - Sticky code sections for improved contextual browsing (sticky scroll)
Tags: vscode, webdev, productivity, javascript
Published: 2023-11-20 14:00:31


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](https://code.visualstudio.com/docs/getstarted/userinterface#_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](https://www.roboleary.net/2021/11/06/vscode-you-dont-need-that-extension2.html#2-bracket-pair-coloring) and [colored guidelines](https://www.roboleary.net/2021/11/06/vscode-you-dont-need-that-extension2.html#3-indentation-guides-colorization) that outline the extent of scopes,
- You can have [breadcrumbs](https://code.visualstudio.com/Docs/editor/editingevolved#_breadcrumbs) (`breadcrumbs.enabled` setting) that outline the scope of your position within the current file.

<figure>
![The floating minimap of VS Code for a JavaScript file.](https://www.roboleary.net/assets/img/blog/2023-11-20-vscode-sticky/minimap.png)
<figcaption>The floating minimap (righthand side) in VS Code shows your position in the file.</figcaption>
</figure>

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:


![Demonstration of the editor.stickyScroll.enabled setting on a HTML file.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i573j6uh2hbqavp92emc.gif)

This displays your current context in an easy to digest way. You will really appreciate it when you have messy HTML files!

![Demonstration of the editor.stickyScroll.enabled setting on a HTML file.](https://www.roboleary.net/assets/img/blog/2023-11-20-vscode-sticky/html.png)

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.](https://www.roboleary.net/assets/img/blog/2023-11-20-vscode-sticky/javascript.png)

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`:

```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](https://code.visualstudio.com/docs/getstarted/settings#_multiple-languagespecific-editor-settings). For example, the following disables sticky scrolling for HTML and XML:

```json
  "[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.