Become a VS Code Power User

Searching a Codebase

Steve Kinney
Temporal
Become a VS Code Power User

Lesson Description

The "Searching a Codebase" Lesson is part of the full, Become a VS Code Power User course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses the find and replace functionality in text editors. He explains that you can use Command-F or Control-F to find and replace within a specific file, and Command-Shift-F or Control-Shift-F to find and replace across the entire project. He demonstrates various options such as matching case, whole word, and using regular expressions. Steve also mentions the ability to search in specific file types or directories, and the option to save and reuse code searches.

Preview
Close

Transcript from the "Searching a Codebase" Lesson

[00:00:00]
>> Steve Kinney: Now we get into some of the power tools. Let's talk a little bit about, again, as we said before, how to become a 10x developer, which is how to cause destruction faster. Like most text editors, I cannot come up with a text editor that does not do this, you do have some amount of find and replace, right?

[00:00:20]
And you've got this on two different levels, you've got this in the file, and you've got this across the entire project, right? The functionality is basically the same, we'll look at both, but it is basically same. So if you want to do any particular file, it's Cmd+F, or Ctrl+F if you're on Windows, Linux.

[00:00:42]
And then just Cmd+Shift+F, Ctrl+Shift+F if you wanna do it for the entire project. And you get this cute little thing, right here. And you can see that, you can go up and down for history, there's my fun regexes from earlier. And up and down like that, and you can also expand it and get a find and replace.

[00:01:07]
Trying to think what else is important here, these options are the other kind of important piece, which is, in this case, it is gonna be legit, match the case, no regex, good to go. As far as I know, there's no way to save the setting, but you can kind of see some of the commands here.

[00:01:28]
These are ones I will just, in the sake of pure honesty, have never memorized. But I should, right? And you should too, we all should. Which is match case, match the whole word, this will not get you partial word matches, right? Depending on what you're looking for. So that way if you wanted add by itself but not async add, this would solve that for you, but probably break somewhere else for you, just use the rename F2 thing that I showed you earlier.

[00:01:54]
And then who doesn't love a good regular expression? And so, you can toggle those things on and off. The other one is if you are case insensitive and you wanna do a find and replace, it will preserve the case. So if you wanted to let's say, we don't pair up matching the case, we'll just say add, we can see it gets the capital A.

[00:02:23]
And it gets the lower case one, you can see a highlight. The other fun part that's super useful is on the mini map, you get a sense of all the places that are founded. If you have errors, you'll see red lines there, also really great for figuring out why my TypeScript file won't compile.

[00:02:38]
I'll see one red line, I can just kind of roughly click to it and get close enough. But if we preserve the case in this case, let's change it to sum, and here we can do replace all. So lowercase sum, capital S sum, it'll keep all the case, so you don't have to do it twice.

[00:03:01]
Neat, you can also search by regex, you know when you need to do it. You're not happy about it, but no one goes for regex as their first choice. I weirdly somehow can think in regex, but I understand nobody else wants to do that, that's fine, I should have been a Perl developer.

[00:03:23]
And so, yeah, you can change that, you can search by regex, so on and so forth. More powerful most of the time is the overall, if we hit Cmd+Shift+F or Ctrl+Shift+F, or you can just click on this little magnifying glass. But again, you have to hover over it first and internalize the command before you're allowed to click, promise me?

[00:03:45]
You see a lot of the same options in this case, to no one's surprise, you have this ability to replace as well. You also have, hey, I actually wanna find that word, but only in TSX files, or only in this given directory. Or only in whatever given case you can put like a glob in there to be like, okay, so in this case, this first one here would be like, zoom in a little bit there, yeah, because I wasn't zoomed in enough.

[00:04:22]
The first one is all TypeScript files, or like anything in source, any sub directory and the file include. Or the opposite is you can try to use the ability to exclude given files, whatever you're trying to do any given case, both will do the trick. And so, you can search for something, so let's do asyncAdd, in this case, that should be a few less.

[00:04:45]
So now we can see every place that it is included. If I only wanted to change in the test files, for instance, I could do something like,
>> Steve Kinney: Right, now you can see it's only gonna find it in whatever.test.js, you can get a little bit more granular. You can go ahead and look, you can go say open in editor, let's turn that down.

[00:05:12]
And you can see a more like, kind of exactly where it matches. The cool thing that you can do here, let's say you're doing, for whatever reason, maybe you're doing some data cleaning, right? You're probably not doing this with code all the time, but maybe you're doing it with some CSVs, you can actually save that code search and open it back up later and get kind of all of your settings in this case and go ahead and find it as well.

[00:05:39]
But this will kind of show you all the different files and give you a little bit of a larger view in which to find and replace. Like I said before, we can do regex and where the regex ones are powerful is in the ability to kind of pull out parts of that regex and reuse them, right?

[00:06:00]
So, let's say I wanted something, whereas we'll turn on regex, we'll say async, and then I want to say any word character until the end there. And this will get asyncAdd, will get asyncSubtract, because it's async plus any number of letters, capital, lowercase, we don't care. As you can see, it'll find all of those.

[00:06:21]
But then the thing I can do is we can change it to like, and then the one will be the first thing in parentheses, if you have multiple parentheses, $2, $3. And so now instead of asyncAdd, asyncSubtract, I can rename them all, promiseAdd, promiseSubtract, whatever you choose to do, right?

[00:06:43]
If you need to keep, hey, I wanna take all of these Markdown h1s and make them HTML h1s, right? You could grab the affectively, pound, pound, for all the ones in Markdown files, right? Pound, pound and we wanna say really anything until the end of the line. In this case, we can say, and I want to change it to h1s or h2 in this case, $1.

[00:07:26]
And now you can see, again, I can open this in the editor and it will show you everything that is going to match in this case. And I can replace all of them right here, right now, and keep the text in the middle. It's regex, it's there for you, you know it when you need it.

[00:07:44]
We will literally build a little regex tester as an extension in a little bit if you need to practice your regex, because why not? The other thing that I think is really powerful, and this falls under things that I didn't know you could do until a moment in time where I was like, this is tedious, I hate this.

[00:08:12]
And then, sat down and be there's gotta be a better way. Listen to that inside of you, because a lot of times, my job right now is to kind of show you the lay of the land and inspire you of what is possibly possible, right? But like what is useful to you will be like, anytime you get frustrated, is the time to sit, pause, reflect, and figure out is there a better way to do this.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now