Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min

The VS Code 1.70 release notes share a new nifty experimental editor feature – sticky scroll!

Find and enable "Sticky Scroll" in your VS Code settings.

VS Code settings showing the Sticky Scroll option.

Or add the following line to your settings.json:

{
  "editor.experimental.stickyScroll.enabled": true
}

And now, see your JavaScript function signatures stick on the top.

Scrolling in VS Code showing that function signatures stick at the top.

You might argue now that for JavaScript it's an unnecessary editor feature because if you write clean code with short functions, you won't need it. But a) I'm always happy about pretty editor UI features and b) it works for other file formats such as json, css or yaml, too.

VS Code showing a nested JSON files in which the surrounded property lines are sticky.

After sharing this feature on Twitter, Elio Struyf pointed out that you can also configure the sticky element's background color. 🎉

{
  "workbench.colorCustomizations": {
    "editorStickyScroll.background": "#D44",
    "editorStickyScrollHover.background": "#A00"
  }
}

It might need a little tweaking to make it work with your color theme, though. 🙈

VS Code with colored sticky function signatures.

Also, if you want to limit the number of sticky lines use editor.stickyScroll.maxLineCount. The setting's 5 by default.

Related Topics

Related Articles