Rename Refactor & Extract Method

[00:00:00]
>> Burke Holland: Let's talk about some refactoring stuff. Remember when we changed this current color variable using multiple cursors? Don't ever do that. That's a really bad way to try to rename variables in VS code and the reason is because how do you know you got them all? In fact, how do you know that there aren't ones in other files that are referencing the one that you just changed?

[00:00:26]
Instead, there is a rename refactor that you can use inside of VS code. So we've got current color. Let me zoom out a little bit so we can get both of them here. So instead, let's rename if we wanted to rename the color input here, what we should do instead is we should use the rename refactor and that is f2.

[00:00:44]
So if you press F2 you get this little thing that drops down and then we can say, let's say this is lamp input instead. Okay, press enter, and it's going to rename all of the instances that we've got here.
>> Speaker 2: In the same file?
>> Burke Holland: Yeah, well, bear with me here, so, let's talk about this scenario though, where you have multiple files, because we don't, but let's create a scenario where we do and see what that looks like.

[00:01:12]
So, in this case, let's say we have class app, and right now, instead of us initializing it instead, let's export it.
>> Burke Holland: Okay? And then let's say we have another file over here called main.js. And inside of that, we're gonna import from the app file, so we've imported app, and now we can say newapp.init.

[00:01:44]
Okay, so let's say we're actually doing the initialization of this file in another file. So now what we have is a reference to this file from the app file, so let's go up here to the top and actually rename this. So let's say we wanted to rename this to application.

[00:01:58]
So what I'm gonna do is I'm gonna grab this here, I'm gonna highlight it, and then I'm gonna press F2. And I'm gonna rename it to application. And I'm gonna press Enter. And when I did that, you'll notice that the main file changed as well. So if I get over here see how it got renamed over here.

[00:02:17]
So it knows if I use the rename refactor to go find the other instances and rename them, and I bet you now that I have changed this, I bet to you it will let us peak the references here, peak references, yeah now it sees both of them. So normally when you have something like this you can peek references and you can see all the different places that it's used inside of your application.

[00:02:39]
There's a lot of refactoring tools in vs code. I'm just showing you the ones that I think you'll use the most often. Another one is extract method. So a lot of times you'll find yourself as a developer where you've written some code and then you're like, I need to use that code again.

[00:02:55]
And I've now written it twice. So when that happens, what do we do? We put it in a method that we can then call from somewhere else, because don't repeat yourself. So for instance, maybe we had this code here on this adamant, actually, let's do it on. Let's do it on here.

[00:03:12]
We wanna take this code right here and we're gonna put this in its own method. So we could copy it out, create the method, paste it inside, but a better thing to do is to highlight it like this. And then you see a little light bulb over there on the side, what is telling you is there's some things you can do here, and if we press Command or Control period, It asks us do you want to extract this to a method in the inside of this class application, so it sees the class scope.

[00:03:41]
And it's offering to extract the method, we'll say extract method. And I'm going to call it update color. Press Enter. And now we've got an update color and look it even was smart enough to bring along the variable. So these are the refactoring tools that are available to you inside of VS code that allow you to be a lot more productive than if you were trying to change all these things manually.

[00:04:03]
>> Speaker 3: So control period then?
>> Burke Holland: Command or control period brings up the light bulb. If there are any light bulb commands, you'll see the little light bulb out there, to the side.