Go To

[00:00:00]
>> Mike North: And the next topic is refactoring. What we're talking about here, it is sort of like finding your way through a code base. Navigating, trying to find the right function of interest and potentially like changing things that are already entangled with other pieces of code, right? Renaming a function for example.

[00:00:21]
So this is one of the areas where we as developers, we have learned as web developers, I should say, we have learned to accept the fact that our editors force most of this work on us. And for me, personally, I use Shell commands that existed 30 years ago to sort of to find all references to a particular function.

[00:00:44]
I use the Shell command find, and I've been using that same command for years and years and years. Just sort of having accepted that there's no other easy way to search through folders and files for a particular use, or get graph is another one. You shouldn't put these ideas aside.

[00:01:05]
But for regular use, as we went around and talked about our pet peeves with our various tools, context switching is one of them, right? It is not ideal to go from, even if we have an embedded terminal in here, to go from terminal to code to terminal to code.

[00:01:20]
It would be nice if we could sorta stay focused in one area. So the first thing I'm gonna show is to how to go to a file. And you do that, so you can look at your particular key binding, and we're gonna be living in this go menu for now.

[00:01:34]
Going to File it is, it is Cmd+T for me because I have Sublime key bindings installed. I have Cmd+P as well because if you're used to Atom and Sublime, that's sort of become a defacto way to do it. And you see we've got a list of files here, so they're sorted in order that we last opened them.

[00:01:56]
So very recently, we were looking at refactoring this markdown file before we said render the markdown. Show me the nice layout. This was where we came from. Here's where we implemented our solution. And we were toying around down here with little emmet extensions in CSS and HTML. So if I were to just click on one of these, it would open it in the current window.

[00:02:17]
And of course, as you might expect, this will open stuff to the side. Ad I want you to know that anytime we see a box like this, there is only one box. We'll talk about key bindings that you can use for finding things by symbol, running commands within Visual Studio code itself, like install an extension.

[00:02:41]
Those all just are special strings that we would type into this box. So, for example, if we begin with a greater than symbol, we're gonna get away from files. And now we're sort of telling code to do particular things. If you're used to Sublime or Atom, this would be this is Cmd+Shift+P, right?

[00:03:02]
This is not open a file but rather, editor, do something for me, change my color theme, run a task, something like that. So that should be pretty simple. Let's talk about going to a definition. I'm just gonna open up a relatively simple file. So this is a regular JavaScript file and I refer to other objects in here, some of which are within my own code base.

[00:03:32]
Some of which are core language features, like a promise that comes with JavaScript these days. And some of which are in libraries that I have sort of brought along. But what we can do is hold down the Command key and when we hover over things, they become links.

[00:03:50]
And we can click on them, and that'll take us to the definition of whatever we were clicking on. So in the event that, sorry, let me go back to that file. Nice, it's on the top cuz we were just there. So if we can click on this, we'll sort of jump to that function.

[00:04:07]
Click on this, we'll jump to that property. It's really nice to have linked code so that we can sort of drill in and drill in and explore our code base. So that is Go To definition. There's also something called the type definition. And you'll note that I get some pretty great autocomplete style feedback from the editor here.

[00:04:33]
When I do something like this, first off, it seems that the editor knows that there's this thing called freeze on an object, right? It has is frozen, freeze, fire. It's actually picking fire up because there's a method down, there's a method somewhere. Sorry, it's in listener support called fire.

[00:04:56]
>> Mike North: So it's basically picked up that string recently and it's saying, did you mean this? Is this what you're trying to use? And then when we have freeze selected up here, you can see that we've got this big kinda description of the various types involved here. And if you are already TypeScript indoctrinated, you will see that, this is the object constructor, which is the capital O object, freeze is the function name.

[00:05:24]
It takes in an argument and it returns a Readonly array with this item in it. So where are we getting this information from? Where could we look at the definitions of everything that's on an object? We would right-click on this and we can say Go to Type Definition.

[00:05:43]
And it'll take us basically to a file that is built into TypeScript. In this case, it's because we have TypeScript involved in this project and these aren't functions. These aren't implementations of these things because those are internal browser code pieces, right? But it is a description of, with types, anything that can be done on this object constructor, more specifically.

[00:06:15]
So oftentimes, you want to take a look of that.
>> Mike North: So that was type definition. Symbol is pretty nice. And this was implemented in Sublime and Atom as well. So if we're in this file, we can actually hit Cmd+R or you can just open this thing up and start with a hashtag.

[00:06:35]
And you basically start to search for symbols. And so if I said cart, it's basically found a couple of functions. So it's found objects like a class called CartStore, a component called Cart. And then here it's found a couple of functions here, so if I said, let's say saveCart.

[00:06:58]
Actually, I think it's like this. There it is, saveCart, so I can click on that and it'll take me to this. So symbols would be basically high level names of things that relate to your data structures. Classes, functions, constants, things like that.
>> Mike North: So you can hit Cmd+R.

[00:07:26]
Sorry, let me add a little bit of detail here. What we were just looking at with the hashtag, that is searching in our workspace for a symbol, right? Note that if we had cart, there was multiple files here. If we begin with an @ sign, this is only within this particular file.

[00:07:50]
And you'll note that I get a much more complete set of results. I didn't even have to type anything, just because it is feasible to just show you all of the symbols that are available within this file.
>> Mike North: So those are symbols, great way to jump around to different functions within a given file.

[00:08:12]
And then finding by line, I use this. There's basically one situation where I find myself using this. And that is if I have a production asset and I have a stack trace that points to line 21,000 of 80,000 and source maps have failed me for some reason. You can just hit Ctrl+G, or in the Go menu, there's Go to Line.

[00:08:39]
And here we could type in Go to line 900, and it'll take us right there. But again, this is the same box, same box. We just begin with a :, an @, a #, a >. And that helps us understanding exactly what we're asking for, sort of the command.

[00:09:00]
And then think of the rest of the string as your argument that you're passing to that command.
>> Mike North: All right, so that's sort of jumping around to various important milestones within your project.