Visual Studio Code Regex Search Cheat Sheet

A cheat sheet for searching in VS Code using regular expressions.

Lincoln W Daniel
Published in ModernNerd Code • 
3 min read
VS Code

Searching through your project's source code in Visual Studio Code is easy. However, it can feel very limited if you're not familiar with how to use its powerful regular expression (regex) search capabilities.

For that reason, in this article, I'm going to share with you some of the regex search queries I use for finding complex lines of code in my projects, especially when I'm working on a large refactor, as is the case right now. These are just the regex searches that have worked for me in my projects that run ManyStories.com and OurTransfers.com, so if you have your own, please share in the comments.

Just remember to toggle on the regex setting in the search input:

Find a variable that's dot-accessed

You may have an variable that holds an object. From that object, you've accessed some number of fields, scattered across your app. Because that variable is globally defined, as is ill advised, you can't rely on your editor to find it nor automatically refactor it to a new name. This is where this regex search query comes in handy.

Say you your variable is named myVariable and you access it via dot-notation like this: myVariable.someProperty or myVariable.someFunction(). You can use this VS regular expression search query to find all of those lines of code:

(?<![\w\d])myVariable(?![\w\d]).(.*)

See, I have this exact scenario in my own project, which I'm now trying to refactor to better practices, away from global variables. My global variable is called sm, and this is how I found all 1,390+ instances of dot-notation access lines for that variable:

Find and remove part of search query

What if you have a bunch of imports around your code that look like this:

import { default as apiModels } from './path/to/apiModels'
import { default as promises } from './path/to/promises'

And you want those to instead look like this:

import apiModels from './path/to/apiModels'
import promises from './path/to/promises'

You can use regex to find and replace them all in a single go using the following find and replace combination with regex:

// Find
import \{ default as (.*) \} from

// Replace with
import $1

That's such a powerful tool to have when you're refactoring a large code base. Again, I'm using this to do a large refactor as I create this cheat sheet for you and myself to remember later.

The $1 in the replacement input replaces the everything that was removed with what matches for (.*) (the first matched part) in the regex search query.

Replace Absolute Imports with Relative Paths

If you're migrating to relative imports in TypeScript, you can use the find and replace regex search query to speed up the process.

Let's say you have a folder in your project called src/events/ and you currently import it using absolute paths, such as import events from '../../events/path/to/someFile.js'. Now, you want to migrate to using relative imports, such as import events from '@/events/path/to/someFile.js'.

The following regex find and replace search query in VS Code can make that a one-step migration across all of your files, regardless of how deeply nested the files are:

// Find
from '(.*)/events/(.*)'

// Replace with
from '@/events/$2'

As always, I've used this query on my own project. It's saving me a great deal of time across hundreds of files and countless variations of relative imports.

Isn't that so wonderful! See that we're using $2 for the replacement in this case. That's because we want to keep the second matched part (.*) of the regex query.

This assumes you have your tsconfig.json setup with the relative import paths you want to use:

Those values are nested in compilerOptions.

Find all CommonJS Imports

Use this search query in VS Code to find all CommonJS require('...') statements that are stored in a constant variable:

const (.*) = require\('(.*)'\)

This is helpful for when you need to migrate to ES imports. This is how it looks in my own VS Code search results:

Find at the top of files

Use this VS Code search query to find all files that have a require('…') statement at the very start of the file:

^(?<!\n)const (.) = require\('(.)'\)

The ^(?<!\n) portion at the start of that search query is how you tell VS Code that you want only the results that don't have any new lines above them.

This query is helpful when you're trying to migrate your JavaScript project to TypeScript with ES imports and exports instead of CommonJS imports and exports. I had to use this for a couple days while doing my own migration to TypeScript.

VS Code
Visual Studio Code
Text Editor
Code
Find and Replace