Dev Pro Tip: Use Search to Improve Productivity


Here is the situation: a client comes back a year after their project is complete and wants some changes made. Or a client comes to you to make changes on an existing project that was developed by somebody else. Also if you are working on a large project with a team this can also be a very handy technique.

Now instead of manually digging through all the folders and files to find what you need to edit, it’s usually much quicker to use the search functions built into your code editor. Most editors have a Find in Folder search option available for this exact purpose.

How to search in Visual Studio Code

In Visual Studio Code the easiest way to search a folder is to view the Explorer sidebar and right-click on the folder you want to search in and select Find in Folder. Alternatively, you can use the menus by going to Edit -> Find in Files or use the shortcut [Win: Ctrl + Shift + F | Mac: ⇧ ⌘ F] and in the “files to include” input enter the folder path.

Visual Studio Code - Find in Folder

Now I usually try to narrow down the folder to what I am searching for. Like the location of a specific class in my styles folder. The real benefit of this is it will narrow down the results and it will take less time to perform the search. If you include the folder that your build process compiles to you will end up with a bunch of compressed code that you will need to go through in the search results. Also, make sure to avoid node_modules and bower_components folders like the plague as they will take forever to search through.

A typical workflow

A typical workflow for this would be the following:

  1. Inspect the element or the parent of the element that you need to access with Developer Tools in the browser
  2. Look for a class name or HTML element to search for.
  3. Double-click on the search result and then start getting to work!