VS Code Find and Replace: Complete Guide

VS Code Find and Replace: Complete Guide

Visual Studio Code's Find and Replace feature is one of the most frequently used tools in a developer's daily workflow. Whether you're renaming a variable across a large codebase, fixing a recurring typo, or refactoring an entire module, mastering Find and Replace can save you hours of manual editing. This guide walks you through everything from the basics to advanced techniques, including regular expressions, multi-file search, and best practices.

What Is Find and Replace in VS Code?

Find and Replace is a built-in text manipulation feature in VS Code that allows you to locate specific strings, patterns, or regular expressions within a file or across an entire workspace, and optionally substitute them with new content. It comes in two primary flavors: single-file Find and Replace, and global (workspace-wide) Search and Replace.

The feature is powered by a fast, incremental search engine that highlights matches in real time as you type. It supports case-sensitive matching, whole-word matching, regular expressions, and preserve-case substitution, making it suitable for both simple text edits and complex refactoring tasks.

Why It Matters

Manual editing is error-prone and slow. A single missed occurrence of a renamed function can introduce subtle bugs that are difficult to trace. Find and Replace gives you a deterministic, auditable way to make sweeping changes with confidence. Here's why it matters:

• Speed: Rename a symbol across thousands of files in seconds.
• Accuracy: See every match before committing changes, reducing the risk of missed edits.
• Refactoring power: Combine with regular expressions to transform code patterns structurally, not just literally.
• Consistency: Ensure naming conventions and API usage are uniform across a project.
• Reversibility: Changes can be undone with a single Ctrl+Z, and global edits appear in a reviewable diff panel.

How to Use Single-File Find and Replace

The single-file Find and Replace widget is the simplest entry point. It appears as a small overlay in the top-right corner of the editor.

Opening the Widget

• Ctrl+F (Windows/Linux) or Cmd+F (macOS): Open Find.
• Ctrl+H (Windows/Linux) or Cmd+Option+F (macOS): Open Find and Replace.
• F3 / Shift+F3: Jump to next / previous match.
• Alt+Enter: Select all matches for multi-cursor editing.

Basic Usage

Press Ctrl+H to open the widget. Type the text you want to find in the first input box, and the replacement text in the second. Use the toggle buttons on the right of the search box to enable case sensitivity (Aa), whole-word matching (ab), and regular expressions (.*).

For example, to replace all occurrences of var with let in a JavaScript file:

// Before
var count = 0;
var name = "VS Code";
var isActive = true;

// After Find and Replace (var -> let)
let count = 0;
let name = "VS Code";
let isActive = true;

Replace Options

Once you've entered your search and replacement strings, you have three actions available:

• Replace: Replaces the currently highlighted match and moves to the next.
• Replace All: Replaces every match in the file at once.
• Preserve Case: When enabled (the AB toggle next to the replace box), VS Code preserves the casing of the original match in the replacement.

Preserve Case is particularly useful when renaming identifiers that appear in different cases. For example, replacing userName with userEmail will automatically produce UserEmail where the original was UserName, and USEREMAIL where the original was USERNAME.

How to Use Global Search and Replace

For changes that span multiple files, use the global Search panel. Open it with Ctrl+Shift+F (Windows/Linux) or Cmd+Shift+F (macOS). To enable replacement, click the small arrow next to the search input or press Ctrl+Shift+H / Cmd+Shift+H directly.

The Search Panel Layout

The global Search panel contains:

• Search input: The text or regex pattern to find.
• Replace input: The replacement text (revealed by toggling the replace arrow).
• files to include: A glob pattern to restrict which files are searched.
• files to exclude: A glob pattern to skip certain files or folders.
• Results tree: A grouped list of files with match counts and inline previews.

Scoping Your Search

Large projects can return thousands of matches. Use the include and exclude fields to narrow results. For example, to search only TypeScript files while ignoring test files:

files to include: **/*.ts
files to exclude: **/*.test.ts

You can also right-click a folder in the Explorer and choose "Find in Folder" to restrict the search to that directory without typing a glob pattern.

Reviewing and Applying Changes

Unlike single-file replacement, global replacement is a two-step process. After entering your search and replacement strings, click the "Replace All" button (the icon with all matches). VS Code will stage the changes in the results tree, showing a diff for each affected file. You can:

• Click any file to preview the exact changes.
• Use the per-file replace button to apply changes to selected files only.
• Click "Replace All" at the top to apply all changes across every file.

This staged workflow gives you a final review opportunity before committing sweeping changes, which is invaluable for large refactors.

Using Regular Expressions

Regular expressions transform Find and Replace from a literal text tool into a structural code transformation engine. Enable regex mode by clicking the .* toggle in the search widget.

Capture Groups and Backreferences

The most powerful regex feature in replacement is capture groups. Wrap parts of your pattern in parentheses, then reference them in the replacement string using $1, $2, and so on.

For example, convert a function declaration from the old function syntax to arrow functions:

// Search pattern
function (\w+)\(([^)]*)\) \{

// Replace pattern
const $1 = ($2) => {

Applied to this code:

// Before
function add(a, b) {
  return a + b;
}

function greet(name) {
  return "Hello " + name;
}

// After
const add = (a, b) => {
  return a + b;
};

const greet = (name) => {
  return "Hello " + name;
};

Common Regex Patterns

Here are several practical patterns developers use frequently:

// Remove trailing whitespace
Search: \s+$
Replace: (empty)

// Convert single quotes to double quotes (careful with escaped quotes)
Search: '([^']*)'
Replace: "$1"

// Convert kebab-case CSS class names to camelCase in JS
Search: -([a-z])
Replace: $1 (with preserve case, or use \U$1 in some engines)

// Find TODO comments with a specific author
Search: // TODO\((\w+)\): (.*)
Replace: // FIXME($1): $2

// Match empty catch blocks
Search: catch \([^)]*\) \{\s*\}
Replace: catch (error) {
  console.error(error);
}

Regex Gotchas

VS Code uses JavaScript's regular expression engine, which means:

• Lookbehind assertions ((?<=...)) are supported in modern Node.js versions but may not work in older environments.
• The $ in replacement strings refers to capture groups, not the end of string. To insert a literal dollar sign, use $$.
• Dot (.) does not match newlines by default. Use [\s\S] instead of . for multi-line matching.
• There is no inline flag for case-insensitivity; use the Aa toggle or character classes like [a-zA-Z].

Multi-Cursor Find and Replace

Sometimes you need to edit matches individually rather than replacing them all with identical text. The Alt+Enter shortcut in the Find widget selects all matches and places a cursor at each one, enabling simultaneous multi-cursor editing.

For example, if you find all occurrences of console.log and press Alt+Enter, you can then type to wrap them, delete them, or modify arguments independently at each cursor position.

// Find: console.log
// Press Alt+Enter to place cursors on each match

// Then type to wrap each in a conditional:
if (DEBUG) console.log

// Result across all matches:
if (DEBUG) console.log("start");
if (DEBUG) console.log("processing");
if (DEBUG) console.log("done");

Find in Selection

When you only want to search within a highlighted portion of a file, select the text first, then press Ctrl+F. Click the "Find in Selection" icon (it looks like a selection bracket) in the Find widget, or enable the setting editor.find.autoFindInSelection to make this behavior automatic when multiple lines are selected.

This is useful when a pattern appears throughout a file but you only want to modify it within a specific function or block.

Best Practices

Always Preview Before Replacing All

Even with a carefully crafted pattern, edge cases can produce unexpected results. In single-file mode, step through matches with F3 before clicking Replace All. In global mode, review the diff tree and spot-check a few files before applying.

Use Version Control as a Safety Net

Before performing a large global replace, commit your current work or create a new Git branch. If the replacement introduces problems, you can revert instantly with git checkout . rather than relying on undo history, which may not span all modified files.

Prefer Specific Patterns Over Broad Ones

A pattern like data will match hundreds of unrelated occurrences. A pattern like \bdata\.id\b is far safer. Use word boundaries (\b), anchors (^, $), and context-specific prefixes or suffixes to avoid false positives.

Leverage File Scoping

Always scope global searches using include and exclude patterns. Searching node_modules or dist folders wastes time and clutters results with matches you have no intention of editing.

Combine with Preserve Case for Renames

When renaming a symbol that appears in multiple cases (camelCase, PascalCase, UPPER_SNAKE_CASE), enable Preserve Case to maintain consistency automatically. This is especially helpful for constants and class names.

Learn Keyboard Shortcuts

Memorizing the core shortcuts dramatically speeds up your workflow:

• Ctrl+F / Cmd+F: Find in file
• Ctrl+H / Cmd+Option+F: Replace in file
• Ctrl+Shift+F / Cmd+Shift+F: Global search
• Ctrl+Shift+H / Cmd+Shift+H: Global replace
• Alt+Enter: Select all matches
• Ctrl+D / Cmd+D: Select next occurrence (multi-cursor)
• Ctrl+Shift+L / Cmd+Shift+L: Select all occurrences of current selection

Use Extensions for Advanced Refactoring

For structural refactoring that goes beyond text patterns—such as renaming a symbol across an entire TypeScript project with full type awareness—use VS Code's built-in Rename Symbol feature (F2) or extensions like the language servers provided by TypeScript, ESLint, or Prettier. Find and Replace is a text tool; it does not understand code semantics.

Conclusion

VS Code's Find and Replace is a deceptively powerful feature that scales from quick typo fixes to project-wide refactors. By understanding the single-file widget, the global search panel, regular expression capture groups, multi-cursor selection, and file scoping, you can make precise, confident changes across any codebase. Pair these techniques with version control and a habit of previewing matches before applying replacements, and you'll turn a mundane editing task into a reliable, efficient part of your development workflow.