Renaming

[00:00:00]
>> Mike: I've got rename here, and there are three levels to rename. It goes from pretty good, we've been using find and replace for a while, and then starts to get better from there. So pretty good is Find and Replace, and that works exactly as you would expect. So if we go back to our listener-support here, we can hit Cmd+F, find something, open this up and replace it with something else.

[00:00:22]
This has been around for ages, not really interesting. Level two is using Cmd+D for selection, and then using basically multicursor support to write out the new name. So level three would be F2 for renaming a symbol in all files, and here's what that looks like. If I were to say, go to the cart-store, I'm looking for a public function here.

[00:00:52]
doCheckout(), that seems pretty important, checkout with my order here. I can hit F2 and it's gonna let me rename this.
>> Mike: I'll say checkoutNow, I'm gonna hit Enter. So you'll see this little dot up here indicates I have unsaved changes. And if I show my sidebar here and go back to my File Explorer view,

[00:01:20]
>> Mike: It looks like this was all localized within this one file, let's see.
>> Mike: What are my diffs here?
>> Mike: Show changes.
>> Mike: Open changes.
>> Mike: I guess I have to save it. So there's checkoutNow, maybe this wasn't wired up? Let me check a couple other places.
>> Mike: Actually, I've got a different idea here, let's look at all the references.

[00:02:00]
>> Mike: doCheckout's only used here.
>> Mike: Cart
>> Mike: Ah-ha, so maybe this is sort of too deep in React land for it to be detected here. Let me pick something a little bit less of a back flip here.
>> Mike: Let's do in our listener-support, cuz I'm gonna pick something that is only used in JavaScript outside of the render function of our React stuff.

[00:02:35]
So if I have register and unregister, I could hit F2, do registerListener, save it. And what we've got here are a couple of other files that were open. And if we look at what's happened in each of those, it's actually changed it across multiple files here. So through it's knowledge of the way our code is structured.

[00:02:55]
It appears there's a little gap where if you're using it, if it's something that's bound into a React component in the render function, maybe it has trouble walking that syntax, that part of the AST. But for the most part, this is pretty nice, and you could go into each of these and use these little things in the gutter.

[00:03:15]
See I've got two little blue notches here, those represent modifications to this file. So we could go check them out one by one, everything looks good, save it. And we should be good now, and our app will continue to work.
>> Mike: Or it should.
>> Mike: If it's in the foreground, if we let it work.

[00:03:37]
[LAUGH] And if we wanted to change it back, we could just do this. You could actually do it from within any of those functions, you don't have to go to the definition, you could just go to the use, right? We could go here and say, nope change it back, we're just gonna to have register.

[00:03:54]
>> Mike: And then, now we've got all of these modifications again. We can do Save All if we wanted to. And just say, well, we will proofread this when we're making our git commit. So that's a relatively recent addition to Visual Studio Code. Another type of refactoring that is common is taking some code and extracting it out into a function.

[00:04:22]
So let's look at how that works.
>> Mike: Let's say that we've got this code here, right? So basically this is adding an item to a cart. If it's already in the cart, we're just gonna bump up the quantity of the existing item, rather than adding a new item to this cart.

[00:04:40]
So for some reason we want to make this its own file. You see that when we select this and click this little light bulb, this is giving us the ability to make this a new function within the same class. So if I hit Enter, you'll see we've got newFunction here.

[00:04:57]
And we could click on that and see, there's our stuff, probably needs some formatting love. We could select that, hit F2, say addOrIncrementCartItem, Enter. And now that was also renamed wherever it was used, right here. So pretty nice, this is opening up a new workflow that is, in my view, a great way to do things.

[00:05:26]
But typically requires some manual work. And that is just start writing your function, and as you see chunks of code that might be,
>> Mike: More broadly useful than just accomplishing this one thing, refactor that out into it's own thing. And then rename lets you just do the finishing step of adding something descriptive.

[00:05:45]
And then go back into that function again, and it's really easy now, just select, refactor out, and it just works. And depending on what context you may be in, it could say create a new global function called this, right? If you're not inside a class, that would be the option given to you.

[00:06:04]
So that is pretty cool, and that landed two weeks ago? So, again, this is approaching IDE level code manipulation features