Integrated Development Environments Superpowers 13 exercises
explainer

Quick Renaming in VS Code

In this example, we have a filterUsersById function that uses the phrase id for a couple of different ways:


const users = [
{ id: "1", name: "Robin" },
{ id: "2", name: "Dennis" },
{ id: "3", name: "Sara" },
];
const filterUsersById = (id: string) => {
return users.filter((us

Loading explainer

Transcript

00:00 Let's look at another really beautiful little thing that you can use in VS Code and lots of other IDs too, which is RenameSymbol. Here we have a function called filterUsersByID, which takes in an ID of string. Then we filter over these users with user, user.id equals ID.

00:17 So we're comparing this user ID and we're getting the right users based on its ID. Except that I'm having to use the phrase ID a lot here.

00:27 So how would I go about renaming just this, for instance, this function parameter of ID string into user ID, or for instance, ID to filter by? So what I could do is I could do a Command-D here. So Command-D basically selects everything with that exact text in there. This isn't common to just TypeScript.

00:47 This is just a VS Code thing, which I know how to use. And I can say user ID here, except for the fact that I've now changed user.userID as well. Which is really annoying. What if there was a more powerful way that you could do this, which would smartly just change the things that are referenced to ID here?

01:05 Well, you can. If you just right click on ID here and then say RenameSymbol, what it does is just opens up this little panel here. I change to user ID and bam, it's just worked. So user ID, user ID are now changed. And I can as well just change this to anything I want to.

01:24 So user ID to filter by, for instance, I can go just to preview as well, just to get a little preview of what I'm doing. And I can apply it or discard it and bam, done. It's just a beautiful way to operate and it also works across files as well.

01:41 So if you have something you need to refactor, like you're working in a big project, RenameSymbol, so, so good. And it means that you can just move a lot faster.