Navigating Source Files

[00:00:00]
>> Steve Kinney: I need to talk to my Mac users for a second. There are, if you kind of even go here you can see there's a lot of F12, F8 there's some F2 kind of stuff. You have those keys on your keyboard. What happens if you press one? Brightness will go up and down, or your sound will turn on and off, and stuff along those lines.

[00:00:26]
You can switch that in Mac OS, if you go into the system settings, go to keyboard shortcuts, go to function keys, and you can do, hey, I want them to just be function keys, right? And now, before you have that FN key on your keyboard, before it was gonna be brightness up and down, and if you held FN, it would be F1, F2, now the opposite is true.

[00:00:49]
If you just touch the key, then it is now F1 if you need to change the brightness hold function. I think for the average person, they want the keys with the brightness. For us as developers, I want my F1 key back, please. So that is a little trick that you can do to have your regular keys back.

[00:01:09]
There are a few this kind of blends a section where we call navigation, but a little bit of the refactoring stuff as well, because they are kind of tied together. Which is we've got a bunch of various things that we can do. One of which, and these are again, very helpful for kind of navigating our code as well.

[00:01:31]
If we take a given function, if we right click on it, you can see that we've got some options here. We've got go to definition, what this is the definition of the function add. You can also go to References, and this is where it is being used. Usually you want the opposite, which is, I've got this ad now, not particularly compelling.

[00:01:51]
We all can kind of guess what an add function does. But you can also kind of go to References or the Definition in this case, which, depending on your language, they might be the same thing, right? Java, it's gonna get a little more nuanced a lot of cases, the reference and the definition are the same.

[00:02:12]
And you can jump back and forth. The other thing you can do is, if you go down to any given one of these functions, right, if you command click, you will also jump to that. This works if it's in a different file as well. Also super useful if you're writing Typescript and it's, it's this type.

[00:02:31]
What is this type, right? You can a lot of times command click on the type and go see the type definition as well. So incredibly useful, you don't have to know where that is. It could be down so far deep in node modules that you never thought you'd have to journey in there.

[00:02:48]
And you don't even know where the file is, right? But in a lot of cases you will go ahead and it will go ahead and find it for you, which is super useful a lot, I will instinctively do it a number of the times as well.
>> Speaker 2: What's command key for that one?

[00:03:02]
I used that one all the time.
>> Steve Kinney: So you've got the choice of F12 or whatever. For me personally, is I just command click. It's probably Ctrl+Click on windows.
>> Speaker 2: Yeah.
>> Steve Kinney: Yeah, and it will jump right into it for you and kinda go back and forth from a reference of it being used to this file to the implementation.

[00:03:25]
If there are other options in a bigger file, you'll see, kind of you'll get llittle sneak peeks of where it might be, and you can kind of jump to the right one. I instinctively use that one all the time. Other one that I use an actual ton. What's the old joke?

[00:03:48]
The the hardest problems in computer science are naming things, cache and validation and off by one errors. A lot of times I am working on something and I no longer the name of this function. Or I no longer whatever, the variable, what have you, and I need to change it.

[00:04:07]
Now, I do not, find and replace is fraught with peril, right? Because, if that's inside of another word, right? For instance, if I just tried to find and replace all ads, I would also change async ad as well. And who knows where else I would the amount of chaos that I have caused with an overzealous Find and Replace cannot be understated.

[00:04:31]
I have caused more damage with Find and Replace than any other thing in my entire programming life. This is the one that I use honestly every day which is if you hit F2, you can rename a function variable and throughout, especially if you're using something with a language server.

[00:04:52]
So TypeScript, Python, most languages, unless, it's your own homegrown language or whatever, most languages as long as. If you're using Zig installzigextension, that's the only thing, right? You know what I mean? But for most major languages, you can go ahead and it will use the language server where if you look, I can hover over this, I get js.forit, same over here.

[00:05:15]
If you hit F2.
>> Steve Kinney: And either place honestly, you can go ahead, let's call it sum now. And throughout my entire code base, all references to the add function are now called sum, right? And I can do a major refactor throughout my entire code base and it will be renamed everywhere, not through find and replace.

[00:05:36]
But through that actual mechanism of go from the implementation to the reference. Knowing that and knowing the type and all those things, it will just do that all for me. If we don't believe me, we can close this terminal. It's taken up a lot of room cuz I also have my font up very high.

[00:05:51]
It has been changed to sum, right? Yeah.
>> Speaker 3: In that context menu for things sum, there's a definition and a go to source definition. Should I worry about those at all?
>> Steve Kinney: Yeah, some of them, I can't always remember the difference, especially if you just use Command click.

[00:06:13]
I don't even see them most the time. I think four things where your type and your class might be in totally separate things. I'm thinking about Java in this case, right? I think that there's more nuance to that in TypeScript, it doesn't really. Or it might be if I had a type separate from the actual implementation, those separate in a lot of cases.

[00:06:33]
If there is more than one, a lot of times that Cmd+Click will show you a menu when we get into, a slightly bigger app, and you can kinda see where they are and peek at them. A lot of times you get enough context clues as well. Other things in terms of navigation is, you can see you have these breadcrumbs up here which are, we saw that go to file and we also had that go to symbol, right?

[00:06:55]
So again, that symbol, that same ability you had to jump between symbols is what's powering that renamed symbol, right? And so it knows, kind of what the name of this one is. I go down to subtract. You can see a change to subtract. I can see what file I'm in.

[00:07:08]
I can kind of navigate to things around that as well and find myself in different places. How often do I do that? Not that often usually, I'm trying to jump to a particular symbol. A lot of times, I'm jumping around my code base without really paying attention to what files I'm in, right?

[00:07:24]
Obviously I look and I care, right? But I'm usually tracking out, that React component is defined in this file. I need to go see the props, right? Or I need to change something about that reaction component that I'm using. And you can kind of take the place you're working and jump to the next place as well.

[00:07:46]
But yeah, that F2 worth its weight in gold. Probably, and again, it will update imports in different files as well. It will any place that the thing would have been referenced, it will change the name. It has a few things that I don't particularly, which is sometimes it will try to alias the various things.

[00:08:12]
I'll show you, if I go here and let's say I hit F2, and I just want to call it add, or let's call it asyncSum,
>> Steve Kinney: Right, it's gonna alias it for me, right? Cuz I didn't change it in the actual file, I changed the import. But you can see throughout the rest of this file, it did change it to asyncSum everywhere, right?

[00:08:41]
So, now I'm importing two things that have the same name. I need to change one of them. I don't have to sit there and do it by hand, I hit one button, I give it its new name. However, put that back, we'll go in here, and we'll change it over in here.

[00:09:00]
The actual one that we'll hit,
>> Steve Kinney: And if we go back into this file, you can see that it did change the imports everywhere, right? And so now I can do large changes a lot of times, obviously, changing add to some cute, but a react component or something along those lines.

[00:09:20]
Or a given helper method that now maybe does something slightly different, or I named it poorly in the first place, because sometimes you don't actually know what you're doing. You're still flailing around a little bit. You can just easily change it everywhere and again throughout your code base, right?

[00:09:37]
And this feature we'll kind of see later, works super well you can, particularly in TypeScript, rename a file, or move a file into another directory, and it will update all the imports everywhere for you, right? A lot of just really stuff that would have been, yeah, just 20 minutes of my life down the drain.

[00:09:56]
Not terrible, but real annoying on the grand scheme of things. Other quick tricks, in terms of just navigating within a given file, is you've got this outline here, which is, it'll be a little bit different for every given language. For instance, in a markdown file, it'll be your headings.

[00:10:19]
And here you can kind of just see the various pieces of your application. You've got A, you've got B, if we went over into this math, you can see I've got the various pieces. And again, this is all the language server, which there are a bunch of them built in.

[00:10:36]
TypeScript, for instance, is built in, JavaScript is built in. But if you're using, again, Rust, you just grab usually an official extension. Not everything is included, but there are a lot of times Microsoft makes extensions and there'll be a language server for that as well. My day job is in Svelte, right, which is a JavaScript framework that has its own language server so that I can navigate and jump around.

[00:10:57]
So if you find that these features are not working for you, just make sure you have the right extension that adds that support, and if that's if that doesn't exist, well, you have two choices. Write your own or deal with it. Deal with it is probably the better the two choices cuz writing a language server is a full day in alpha itself.

[00:11:19]
Let's just put it that way. But yeah. So yeah, trying to think if there's any other major things we said before Cmd+P to jump to a file as well, Cmd+Shift+O for that. In this case, I can see the ones in this file, but I could even jump to something, any function I wanna look and know the name of, I could hit Cmd+Shift+O, try to jump for it.

[00:11:42]
You can see this is at symbol. So again, if you don't even remember Cmd+Shift+O, you only remember the regular command palette, which is me for me for three years. You can just open the regular command palette, change that to an add symbol and you're good to go. Or in this case, the colon will be a line jump.

[00:12:00]
This will just be a file. As long as you can get this thing open, you can usually figure out the thing you actually intended to do and be okay with that in the beginning. Honestly, it's not that bad. Cuz you know you're in the wrong one and then you just realize you need to do that, it's fine.

[00:12:18]
Cool, so yeah, there's a bunch of other ways to navigate around but those are the major and important ones and again, F2, worth its weight in gold.
>> Speaker 2: Do you know the difference between change all occurrences and rename symbol?
>> Steve Kinney: No.
>> Steve Kinney: I don't.
>> Speaker 2: In theory, there's thoughts it might mean one might be within the same one file kind of just a file.

[00:12:44]
>> Steve Kinney: That is probably like that when it changed it to an as versus the other thing, right, as well.
>> Speaker 2: And with go to definition, is there a way to set it up to work across languages? If the same repo has both a client project that's consuming an API from a backend language could go to definition, jump to that API endpoints definition.

[00:13:14]
>> Steve Kinney: Let's go with a strong, maybe, I think that, for instance, if they're all in TypeScript, right? Yes, if one is in Javascript and one is in Go, maybe? Probably not, is it possible, yes, need some way to associate those things, right? And can the languages themselves do that with the two language servers probably.

[00:13:43]
Is your code base really set up for that? Almost definitely not, right? Is it possible? I'm sure it is. Is any code base I've ever worked in my entire life in any way set up for that? Almost definitely not cuz they're barely set up for me having the types match at all.

[00:14:01]
But that's it. There's a longer rant about backends and frontends for a different day.