DEV Community 👩‍💻👨‍💻

Cover image for Visual Studio Code's New Editor Sticky Scroll Feature - Never Get Lost In The Code Again!😍
ByteHide
ByteHide

Posted on • Updated on • Originally published at blog.dotnetsafer.com

Visual Studio Code's New Editor Sticky Scroll Feature - Never Get Lost In The Code Again!😍

Finally came what many of us were not waiting for but wishing for! (like the song that nobody expected but everybody needed it). Who is not tired of having hundreds of lines of code and not knowing what class or interface you are in?

Scroll up, scroll down and keep getting lost in the code without being able to find the namespace or method you are looking for.

You may have been scrolling too fast…

But don’t worry because the ultimate solution has finally arrived. But don’t get excited, for the moment it has arrived for Visual Studio Code in “experimental” mode.

This new feature comes to avoid us developers the excessive wear of the mouse wheel (I’ve seen some with more wear than the tires of a Formula 1) and to save us a little anxiety.

feature

We are talking about Sticky Scroll, the new feature with which you will never again get lost in the code as if you were in a forest without a map.

Sticky Scroll has been introduced in the July release (a_lthough we are in the middle of August_) of Visual Studio Code, specifically in version 1.70. What this feature allows is to show UI with scope the user is in during scrolling.

Let’s see an example to get to meet our next best coding friend more closely:

feature

Thanks to Stefan Judis for this video

Doesn’t it look cool, right?

According to the latest Visual Studio Code Release:

“It is now possible to display UI showing which scope the user is in during scrolling.”

If you are wondering how to enable it, you simply need to enable the editor.experimental.StikyScroll.enabled and you are done!

You can go to the settings of your Visual Studio Code (remember it must be the latest version) and look for the Experimental>Sticky Scroll: Enabled option, like me:

feature

There, now you are ready to never get lost in the code again!

Let’s also see a Preview by Visual Studio Code:

feature

According to Visual Studio Code:

“The “sticky scroll” UI will show which class/interface/namespace/function/method/constructor the top of the editor is in, helping you know the location within a document.”

And obviously this feature has generated a lot of hype among developers. The reception of this feature has been incredible, just look at the comments on the Sticky Scroll video:

feature

Some people even consider it the most useful feature since the syntax highlighting feature:

feature

In my personal opinion I have to say that I would never have thought of a feature like this, but it is true that it is a “very simple” feature but at the same time very powerful.

I also have to say that I agree with Andrii Lukianenko’s opinion in the Linkedin post, it seems to me a very correct point of view:

feature

I think he is right, if a function or method takes up more than one screen, it is most likely doing too many things. If we remember the SOLID principles in C# (mainly SRP), we can remember that in Single Responsibility Principle when something has more than one responsibility it means that we are not doing something in the best way.

I would like to know your opinion about this feature, do you love it? Do you hate it? Do you think it is unnecessary? Do you think it is your salvation?

I’m sure that the mouse scroll wheel of many developers will be very grateful for this feature. Finally it will be able to avoid its own wear and tear.


Right now, writing this article, I’m having a coffee (another xD). And I know that if you are reading this, you are one of the 1% of people who read the articles to the end. So comment me with emojis how many coffees ☕ you drink a day (if I see many I won’t feel the only one🥺).

As there is still quite a day ahead of me, my amount of coffee yesterday was ☕☕☕☕☕

Top comments (78)

Collapse
edu4rdshl profile image
Eduard Tolosa

Hi. There's a typo in

If you are wondering how to enable it, you simply need to enable the editor.experimental.StikyScroll.enabled and you are done!

StikyScrollStickyScroll

Thanks for the great post!

Collapse
ccoveille profile image
Christophe Colombier

Already posted here

This article got some audience last week. But your article is very interesting as you used screen shot and gif. Thanks

Collapse
sami_hd profile image
Sami

Yeah, it is all about marketing

Collapse
lbodwell profile image
Luke Bodwell

While I agree that in an ideal world no function should have a body large enough to warrant use of this feature, the reality is that that's not always the case. Especially at work, I find myself dealing with codebases all the time that don't follow this rule very well, where I'd absolutely appreciate the benefits of sticky scroll.

Collapse
dimitarbogdanov profile image
Dimitar Bogdanov

Besides, sometimes your function is just only calling other functions and passing around the return values. I'd rather have 1 larger function than split it up 3 different functions which all just call more functions, it'll just take more time. Comments can easily solve that issue, imo.

Collapse
deevosage profile image
Sidharth sahni

laughs in nvim, already had it

Collapse
michaelobele profile image
Michael Obubelebra Amachree

Vim users 🙄

Collapse
jlsjonas profile image
Jonas De Kegel

I was just wondering as I'm considering it as my hobby IDE for a while, good to know!

Collapse
deevosage profile image
Sidharth sahni

if youre starting you'll have to configure lot's, use somebody else's config, i liked configs of
youtube.com/c/ThePrimeagen
youtube.com/channel/UC7yZ6keOGsvER...

Thread Thread
jlsjonas profile image
Jonas De Kegel

Well aware, but thanks for the extra heads-up & resources!

Collapse
harithzainudin profile image
Muhammad Harith Zainudin

😂😂😂😂

Collapse
saulodias profile image
Saulo Dias

It does seem like a cool feature, but I'd rather not fix what isn't broken. I might change my mind in the future, but for now I'm happy with the VS Code interface and behavior. I do hope that even with new features they never change the UI philosophy. I have even gone through the hassle of setting up all the command line automation environment for building and deploying an Android Kotlin project through VS Code just because I can't get used to other GUIs, specifically Android Studio's.

Collapse
tamusjroyce profile image
tamusjroyce

Will this be controlled by scroll lock? This is an ancient feature.

And when might they bring back ctrl+click actually going to code by default?

I love additional features. Just don’t remove the original.

Collapse
tamusjroyce profile image
tamusjroyce

☕️☕️☕️☕️ - double shot expresso. Some days I make coffee for triple doses :) Right on!

Collapse
anatooly profile image
Antony Bash

Some moment not work, like this:

const MyComponent = props => {
  const myCallback = values => {
  }

  const getSomeValue = value => {
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
deri_kurniawan profile image
Deri Kurniawan • Edited on

Unfortunately It's not working when use arrow function. Only work for function and class so far

Collapse
b_ritta_ny profile image
B(ritta)ny

☕️☕️☕️-☕️☕️☕️☕️☕️ a day 😂. I use my Pret coffee subscription to its fullest potential! Also I’m so happy about this feature. Sometimes scrolling long code gives me a headache so this really helps compartmentalize everything.

Collapse
noitidart profile image
Noitidart

I need it sticky on the if statements too.

Collapse
tluanga34 profile image
Lalnuntluanga

I use hyper scrolling mouse like Logitech mouse. They are great for this purpose

Collapse
eileenwynn profile image
Info Comment hidden by post author - thread only accessible via permalink
EileenWynn

What does Ctrl F5 do in VS Code ? دعاء رد الحبيب بعد الفراق

Collapse
vishve profile image
vishve

Sattings > experimental > sticky scroll > enabled. Seems nice , I expected more, a quick fold for every loop and Function or a class would be an added advantage. And yes, I read to the completion for these are not plain bogus stories but informative ones.

Kudos, keep writing more be crisp and informative.

Collapse
arunagnihotri profile image
Arun Agnihotri

Thanks for this great post!!!

Collapse
brojenuel profile image
Jenuel Oras Ganawed

☕ times a day for me,, I just drunk ☕☕ yesterday, don't drink too much bro, do drink water too. Too much coffee can lead to kidney stone I think.

Collapse
lilou34 profile image
Lilou

☕☕☕☕☕

Collapse
deepakydv9315 profile image
Deepak Yadav

Thanks for writing this, this is much useful 🎉

Collapse
deepakydv9315 profile image
Deepak Yadav

Thanks for this amazing post 🎉

Collapse
xapuu profile image
Xapuu

☕☕☕ to ☕☕☕☕☕ , nice I will definetly try this out

Collapse
lidiaaadotnet profile image
lidiaaadotnet

In lovee with this feature❤

Collapse
scanepa profile image
Stefano Canepa

☕☕☕☕

Collapse
q118 profile image
Shelby Anne

☕☕☕

Collapse
sergioberlotto profile image
Sérgio Berlotto Jr

Oh my god! This is perfect! Thanks for this tip!

Collapse
sameer_jain_007 profile image
Coder-sam-007

it is pretty useful but it is not working on arrow functions

Collapse
rickschultz profile image
Rick Schultz

It´s just perfect! 😍

Collapse
andrewbaisden profile image
Andrew Baisden

Another great feature to try out.

Collapse
dicethedev profile image
Blessing Samuel

This is so cool

Collapse
yongchanghe profile image
Yongchang He

Thank you for sharing this!

Collapse
dominik_alberski profile image
Dominik

☕☕

Collapse
avinashvagh profile image
Avinash Vagh

It's super useful

Collapse
walterhwan profile image
Walter Wan

Is it a typo?
editor.experimental.stickyScroll.enabled
instead of editor.experimental.StikyScroll.enabled

Some comments have been hidden by the post's author - find out more

🌱 DEV runs on 100% open source code known as Forem.

 
Contribute to the codebase or learn how to host your own.