So you’ve inherited a new code base, or maybe the one you’ve been working on for a while now has grown to be very large! You need a good way to search through the seemingly endless amount of code that’s in the project of yours. There are famous shortcuts that can help with this, but some of them seem a bit lacking. Sometimes, the scope is only within a single file, and when you know the string you’re searching for, it could be anywhere in the whole project. You could painstakingly search each and every file that you know your code could be living in, or you could use some smart tools built into VSCode to make your life easier and get what you need to get done much faster.
This post demonstrates some of my favorite search techniques that work well in VSCode, including some basic RegEx (Regular Expressions) expressions that will help you find exactly what you’re looking for in an unfamiliar code base. We will cover VSCode file type inclusions and exclusions, single-line multi-term searching, conditional searching, and more. RegEx can be intimidating to people who aren’t used to using it, but luckily the RegEx expressions described in this post are very easy to remember and incredibly powerful.
In the spirit of discovery, let’s grab a random and unfamiliar repository and jump in!
Example New Code Base
In the spirit of inheriting a code base, let’s find a free-to-use example on Github:
https://github.com/GermaVinsmoke/bmi-calculator?tab=MIT-1-ov-file#readme
Here is a simple BMI Calculator app written by GermaVinsmoke. Assuming you aren’t familiar with GermaVinsmoke, you likely won’t be familiar with this project, which should be a good testing ground for some of our shortcuts and search strategies!
Let’s open up our favorite terminal application (Terminal, Command Prompt, Powershell, etc.) and clone this project to our hard drive:
CD to the directory you want to use and then use this command:
git clone https://github.com/GermaVinsmoke/bmi-calculator.git
CD into the bmi-calculator directory that was just created:
cd .\bmi-calculator\
And run the following command:
code .
You may need to install some software hooks, which the terminal will prompt you to do. This should open the application’s code base as the working directory in VS Code, saving you from having to manually set it from within the code.
You should now have VS Code open and be in the root directory of the bmi-calculator project that we just cloned. (Because of the extensions I have, you may see some different icons on my sidebar, please don’t worry about that, anything gone over this article will be built into VS Code by default and should be on your sidebar as well!)
Run The Project
We want to be able to run the project, so we’ll go ahead and run the necessary steps real quick. Here is a reminder in case you haven’t done this for a while:
Open a new Terminal:
Run npm install to gather the necessary node packages for the project to run:
npm install
After that’s finished (should take a few moments), run:
npm run-script start
BMI Calculator should run in a new browser window in your default web browser:
Brilliant! Now we’re ready to start searching and digging for code we aren’t familiar with.
Basic VS Code Searches
At the time of writing this article, I was 100% unfamiliar with the code in this project other than the package.json file shown in the previous screenshots. Let’s try searching for something simple and basic, such as the header of the page: BMI Tracker.
There hopefully isn’t anything difficult about finding this string, so let’s start with just a basic search:
Please use the following shortcut that matches your operating system:
Windows / Linux: Ctrl+shift+f Mac: Cmd+shift+f
This should pop open the search pane on the left side of the screen:
This is a project-wide search, this will search throughout the files as is for a string. We can modify our search and enable other search qualifiers, but for now, let’s just see if it’ll find our BMI Tracker header on the page:
There it is! Right in the App.jsx. We could expect this somewhat since it is the title of the page.
Let’s up the difficulty a bit, let’s search for the 0.5 listed on the side of the application:
502 results in 2 files:
It’s not as straightforward as the previous search, right? The first thing I noticed about these results is that the first file with results is the package-lock.json file. In theory, the contents of that file should never appear as text on the screen for the user to see, so we can eliminate searching from that file.
Files To Exclude From Search
There are two ways to do this, the temporary way, and the more permanent way:
The temporary way is as simple as hovering over the 336 results badge and clicking the X to dismiss it. This is fine and very useful in some instances.
However, if we don’t take the more permanent approach, then any number we search for in the future that sits in the package-lock.json will flood our results screen.
Let’s click the ellipses below the .* icon to give us more granular controls over this search:
Here we have two new options, files to include, and files to exclude.
In the files to exclude, type in package-lock.json:
Now our simple search doesn’t bring any results back from Package-lock.json, and never will so long as it sits in that search box. These strings persist when opening and closing VS Code for this project as well, so this isn’t something you’ll have to redo each time you restart your computer.
Look at the remaining results though, they’re from yarn.lock… Well, if what we’re looking for isn’t in package-lock.json, they certainly aren’t gonna be in yarn.lock for the exact same reasons.
Let’s get rid of that too:
Two things to note here,
- Both files are excluded now and will continue to be as long as their names remain in the exclude box
- We have zero results! That means our 0.5 is likely a generated number. This is good for the sake of our article and as a vehicle for more search strategies.
Something of importance to note is that we can temporarily disable our Files to Exclude filters by clicking this icon on the right side of the box:
Enter RegEx Searching
Now, up until this point, I haven’t discussed one of the elephants in the room for this article, the dreaded and confusing RegEx—Regular Expressions. For those unfamiliar with what RegEx is, please give this article a quick glance over. Per Wikipedia:
A regular expression (shortened as regex or regexp), sometimes referred to as rational expression, is a sequence of characters that specifies a match pattern in text. Usually such patterns are used by string-searching algorithms for “find” or “find and replace” operations on strings, or for input validation.
Those who have used RegEx probably understand how difficult it can be to remember and wrap your head around rules. Not to mention that each programming language’s implementation of RegEx always seems to be just a little bit different. However, it’s a powerful tool. Luckily for us, a lot of the search strategies and tips I’ll be providing beyond this point are very very surface-level uses of RegEx, yet incredibly powerful. They have made my life as a software developer significantly easier.
Let’s step back for a moment from our 0.5 search, and examine our first RegEx search. We are working with a front-end-only application that’s running on the React framework. Those familiar with React can tell you that most of the code written for your front end will be using JSX https://legacy.reactjs.org/docs/introducing-jsx.html files. To reiterate again, I didn’t write this application, and I am unfamiliar with it, but I am at least a little confident that our previous attempt to find the origin of that 0.5 string in the application lives in a JSX file.
We already know that 0.5 doesn’t exist as is, so let’s change our search to something for the sake of this example: a.
You’re probably thinking that this is gonna give an absurd amount of results, and you’re right:
948 in 28 files, woo! The search for a is silly, but imagine if this happens when you’re actually searching for something you want and are expecting to find. Our first file is .gitignore. Assuming we’re searching for something we can see on screen, there’s a 100% chance that it’s not gonna be in that file. Let’s ignore it.
.prettierrc.js? What’s that? Don’t care, it’s not in there!
We’re going to run into a point where we have to start adding a lot of files to this ignore list, and it’s going to get cumbersome to work with, huh? What if we can blanket ignore certain files we know for a fact don’t contain what we’re looking for?
Imagine for a moment we don’t want to search anything that’s a JS file, or a YML file, or an MD file, or a JSON file, etc.:
Add them in here format .extension. Also keep in mind that these files and extensions are cap-sensitive and multiple entries can be separate by a comma and a space..
Files to Include In RegEx Search
Let’s forget about ignore files for a second, and shift over to files included. We know we want something in a JSX file:
Or maybe it’s in the HTML file somehow; add a comma, and then add .html:
We just cut our results by almost 1/3rd. Not bad for searching fora.
But… we still aren’t any closer to finding that 0.5…
More Advanced Searches
Let’s gather some info on that 0.5.
Using The Developer Console
In the web browser hit the F12 button to bring up the developer’s console. Once it’s open click this button:
This is the element selector. It will look like this on Chromium-based browsers, but if you’re using Safari or Firefox, it may look a little different.
After clicking that button, click the 0.5:
…Uh oh. I genuinely wasn’t expecting this to be a canvas! The hope was that I would be able to find a class or other unique feature to help me look for that particular element. But with a canvas, we can’t drill into the individual elements. Talk about a curveball!
This isn’t all bad though, we know now that we’re dealing with a canvas at least:
Searching for Canvas brings us to Bar.jsx at least. There are two results for the Canvas. Even temporarily disabling our ‘files to exclude’ box allows us to see that these are the only two references to Canvas in the whole project. This is where our 0.5 on the screen is coming from. Admittedly I’m a little disappointed.
Right-clicking the Line element and Going to its Definition reveals its logic is derived from its index.d.ts file:
Ignoring Directories
This might be a good segway into ignoring directories. Anyone familiar with node packages will know that they can be absolutely massive depending on your project. The best way to keep projects relatively lightweight is to not include them in your git repository and have them downloaded separately for those running the project later, which is exactly why we ran that npm install command at the beginning of the article.
Sometimes while searching you might find results from within your node_modules folder. This will give false positive results and will increase the time needed to search. I don’t know the exact details but a lot of the time the searches are ignored.
For example, we didn’t get any results from it during our search for a, or we probably would have gotten closer to 9,000 results, rather than 900. We can explicitly block search results from that directory and any other:
Add two *s and then the directory surrounded by / and /, like **/node_modules/
That * is Regex for wildcard, and it implies that we want to ignore any directory with the following name, not one at a specific file path. As with all the other strategies we’ve gone over so far, we can do the opposite and put it in the files to include if we’re certain what we’re looking for is a specific directory.
Let’s go over a few more handy searches:
(.*) – Regex String Search
After playing around with the application a bit and entering in Weight and Height, we can see some info pop up at the bottom. Let’s find that Weight is 150 kg (I wasn’t paying attention; 150kg is quite heavy!) Obviously, it’s dynamically generated text on the screen since that weight will change with the user input.
No results.
So how can we find this? We can search for weight:, or kg. But what if I told you there’s a better way to do it? We know that the ‘Weight:’ and the ‘kg’ will likely be on the same line, so let’s use some RegEx to help us find it!
Click this button to enable RegEx:
Let’s add this small and easy bit of RegEx in between ‘Weight:’ and ‘kg’
Weight: (.*) kg
This will find any string on a single line of code that has both Weight and kg on it:
Eureka, the result we’re looking for!
This is probably my favorite search strategy available through RegEx, and coincidentally it’s also probably the simplest.
text1(.|\s)+(text2|text3) – Line Searches
See that X in the top right corner? I’m sure that will delete our element when it’s clicked. Let’s not use F12 to try to figure out the class name, and let’s try to search for it based on what we see. It’s a button, and it is used to either clear or delete something:
button(.|\s)+(clear|delete|eradicate|destroy|explode)
Dropping this into a search bar will search on the same line (.|\s) for buttons, and either clear, delete, eradicate, etc.
We’re in luck, the code we were looking for was ‘delete’ and this found it. This project doesn’t make any network calls, but I find this type of search very useful when searching for network calls:
axios(.|\s)+(put|post)
This will show me all lines that invoke Axios and either a put or a post-network call method. Not useful for our BMI calculator app here, but a good example of how I use it in my daily routine.
Changing (.|\s) to (.|\n) will allow for multi-line searches. This can be useful but expect for it to find a lot more things that may or may not be useful to your search.
^//.*|^/\*[\s\S\n]*\*/ – Comment Search
Sometimes you may want to search specifically through comments left in code:
This can be useful for finding explanations of codes, or finding them to delete them. There weren’t any comments on this project, so I added a few just to show it in action.
Conclusion
There are countless ways you can use RegEx and other built-in search features in VSCode to make your workflow a lot smoother and to help you find what you’re looking for sooner. Take advantage of them, and you’ll be zipping through files with little downtime! Of course, in regards to the RegEx searches, this is just the tip of the iceberg! There are other wonderful resources you can check out to make your own custom brew of RegEx searches:
- Microsoft Documentation (written for Visual Studio, but also works in VSCode)
- Mozilla’s cheat sheet
- Regex generator for string manipulation in various languages
I would also like to thank GermaVinsmoke for the wonderful BMI Calculator that was used as an example in this article. Please show your support for their project!
Find what you’re looking for faster, and get what you’re working on done sooner!
