Code Refactoring Techniques

[00:00:00]
>> Steve Kinney: There's a few more little refactoring things that, honestly, I don't ever use, but I will show some to you. So we've got, we go here, we hit refactor. The one that I have used before is been really, honestly, I usually just cut and paste List is that you can move a function to a new file.

[00:00:27]
As you can see it's pretty smart, right? I grabbed that divide function. I don't even think I grabbed the JS doc for it. I think it found it and took it. You can see that in this case, if I go back to index, it added the import to any file that imported that file.

[00:00:47]
I basically take, if I have a giant file with a bunch of functions in it, I can select them, move them to new files. It came up with a good name for the file. Divide is a solid name. I can't complain. It handled all my imports for me.

[00:01:00]
It did everything along those lines. It's nice.
>> Speaker 1: So if you have a method that you wanna share across several TypeScript components, you could just move it over.
>> Steve Kinney: Pull it right out. I historically, it's probably more muscle memory than anything else. Have usually just cut and paste into a new file.

[00:01:18]
>> Speaker 1: I guess maybe that would be a reason. To decouple and put it in a service.
>> Steve Kinney: Yeah, yeah but theoretically you could then, I think this works in JavaScript. We're all gonna find out together. I know it works in TypeScript is take the file and then move it somewhere else.

[00:01:35]
Let's say you had a folder for that given service, or, in my case, I am guilty of having and we all have this a folder called utilities. [LAUGH] Everyone's face told me that you all have a folder called utilities, which is effectively, might as well be called junk drawer, right?

[00:01:54]
And but if you go here now, you can see that I moved it and it updated the relative file path, so now you can start to pull out the functions. You can move them to where they need to go, and you're not doing all of this manually by hand, right?

[00:02:07]
Because normally, what would happen is I would do that, and then I would chase down the red squigglies, right, across all the different files when TypeScript was yelling at me. Because the given value was no longer found. In this case, it did everything for me and there's sometimes where it will be a little bit more proactive, which sometimes is nice.

[00:02:27]
If we go back to the original version of that playground. The other nice thing is let's say if I type in just playground, I didn't have to match the file name, I got the directory. I can see that I there's a index file. I can kind of, fuzzy match file names of, part of the folder, part of the file name, and I'll get the one I'm looking for.

[00:02:48]
Because, depending on what app let's say you're in, a Next.JS app or a SvelteKit app, you probably have a bunch of files with the same name, right? The ones that are in every route directory to load the server side functions or whatever and svelte is like plus page.svelte.

[00:03:06]
I have 1000 of those, right. And so if you roughly know the folder, you can jump to it. Sometimes it will suggest refactors to you, which is either these little triple dots or this little light bulb. That's not the one I want. Let's go here, which is, in this case, yo, this is a common JS module.

[00:03:30]
Do you want it to be an ES module? And you can hit this quick fix down here, and it will go ahead and convert the entire file to an ES module, right? Also, if you paste in some with a bunch of JS Doc as a TypeScript file. It's like, have you considered using TypeScript?

[00:03:48]
And you go, yes, and then it will just change it all for you, right? Again, those are things that we can all do. We all know how to do. We don't want to do because they're tedious, and we will make mistakes because they're so boring that I will see a notification on that.

[00:04:03]
You know the chat with your coworkers is not on the real chat, but when we just talk smack, the gospel one, yeah, I'll go check that instead. So yeah, a bunch of literary factors and they're helpful, right? I should put this file back. But again, yeah, you can take any given one of these and sometimes it's worth trying to see what some of the options are.

[00:04:29]
But you can go, click Refactor. In this case, it is also Cmd+shift+rR, see what some of the options are. I don't trust these on one of these. That never ends well for me. Extract to function in module scope, move to new file.
>> Steve Kinney: There's a whole bunch of these.

[00:04:59]
>> Steve Kinney: I don't wrap it any condition of for you? Yeah, can be useful. Maybe not, maybe they are but they are all built into there. And my the kind of homework is to explore it, figure out what works for you and what doesn't. Again for some people, they gotta live and die by it.

[00:05:20]
For me I will live and die by that f2 to rename things all the time. I use it every day. Multiple cursors all the time. I don't always tend to use the refactor tools, but they are there, they are powerful and you might like them more than me.

[00:05:38]
Cool. Like I said, if you ever see those little triple dots, there's usually a suggestion of a thing of like, hey, this is a common JS module, do you want to make it ESM? Do you want to turn this JS doc into Typescript types? I'm trying to think what some of the other ones are.

[00:05:54]
Can't really remember. Sometimes it's simply this async await function isn't awaiting anything. That function doesn't return, that way, it doesn't do anything, right? That's useful because a lot of times that's in another file that I haven't I'm not looking at right now, and it is nice to know, right?

[00:06:10]
So there's usually those little triple dots mean that there's something there for you. Cool. And sometimes it'll be like, I think you can misspell something, and it will for the obvious ones probably guess for you, unless you're in front of people, and that doesn't. But yeah, so there's a bunch of little things in there as well that you can kind of play around with.