Navigate faster in VS Code with Footsteps

Okay, let me paint you a picture. You're working in some code, you made a few changes. Now you have to scroll down or scroll up to a different place. You're making changes there. Maybe you've jumped to another file and you're making changes.

And then you suddenly remember, wait, what did I change before? So you like have to scroll around, you try to find what you're looking for. Where is that exact line you made that change? What was that line? What was that variable?

You know, we've all been there. Hey, listen, I didn't say it was a pretty picture I was painting, but today's Versus Code Extension aims to solve all that for us. Let's get to it. Hello, world. My name is Michael Jolley.

I am the bald bearded builder, and I wanna talk about Versus Code extensions. But before I do, let me remind you that three days a week, Tuesday through Thursday at 2PM, seven GMT, you can find us on Twitch at twitch. Tvbald bearded builder. We'd love to see you hang out with us.

Let's get into our extension. Today, wanna talk about Footsteps.

Footsteps is a nice little extension. It's relatively new and it provides some like sugar, I guess, to the UI of Versus Code that lets you realize like where you were changing code last. It's really slick. It's a really elegant solution to that problem. And I wanna show it to you.

So let's get right into it. So how to install it? Well, as always, I've left a link in the description if you wanna learn more about it, but you can click the extension icon in Versus Code, search for footsteps and press the install button. Now, what does it do that really helps?

Well, imagine you're writing that code, you make a change on line five and then you scroll down, you're like on line 200 at this point, making other changes. And you can scroll up to find that thing you did earlier and hunt for that specific line.

But the nice thing that Footsteps does is it highlights every line that you change. And then that highlight kind of fades away the more lines you change. So by default, it uses like a purple color. So it'll highlight that line purple. And then as you change another line, that original line like fades a little bit.

And now the line you're editing is a darker purple. And over time, I think it's like by default, it's like six changes in a row. It fades away to nothing. So nothing's there. And it actually keeps track of that per file.

So if you're making changes in more and more files, then you can have those highlighting in those different places. Now, if you're not familiar with this, there's a slick keyboard shortcut in Versus Code. It's Alt plus Left arrow and Alt plus Right arrow. It lets you go back and forth between where you've been in your code. It's almost like bookmarks.

So if you've made a change, you're like three changes deep, hit alt left arrow, it'll take you to the last place you were, whether you've made a change or not. So if you open up other files and are like hunting around your project, it's gonna go through those places too. That's where footsteps really makes it nice. So you'll know, hey, when I hit back up, am I landing on a place that I've edited or is this just something I looked at? So just hit alt left arrow, yeah.

To go back to where you were and you'll see those highlights along the way. Really slick, makes it really easy to identify places that you've changed.

This one has some really nice customizations. The ability to change that color. So if you don't like the default purple, you can put in RGB value. You can get to it through the command palette, command P or command, whatever the command is, you know it by now, or you can click the settings icon, But yeah, you can change the color. You can change the history.

Like how many changes do you want me to remember? What kind of opacity do you want that to be? It really makes it a fast and a handy to customize it. One thing I would like to see from this extension in the future, like a future revision, I guess, would be instead of choosing the color of the highlight, I would rather it adhere to whatever my theme is.

Like use some kind of, you know, if the background is like a dark blue, do maybe the opposite of that somehow, do some calculations in there. It's math. I don't wanna write it, but I'm sure somebody could and submit a PR form. That would be amazing. So in that way, no matter what thing you use, it would kind of synchronize with that.

I think that'd be a sick feature for them. But anyway, yeah, go check it out, try it and let me know how you like it. I've really found it kind of handy to kind of keep up with, especially when I have long files. Long files finding that stuff is it's the devil. I don't like it.

But anyway, I hope you enjoyed this video. If you did hit that like button. If you wanna see more videos like this, we release videos on Versus Code time or two a week. Be sure to hit subscribe and ding that bell to know when we release something new. Until next time.