How to perform a global find and replace of text (replace all occurences in all files) in VS Code

How to perform a global find and replace of text (replace all occurences in all files) in VS Code cover image

I needed to replace the same string across 21 files in a project recently. I thought this should be quick and easy.

Oddly, it was not obvious how to do this in VS Code! If you want to do in the UI, it is like finding a secret room hidden behind a bookcase from an espionage novel.

Simply put, I wanted to remove the string series: "VS Code Gold" from all markdown files located in the folder src/posts. The markdown files are blog posts, and the series metadata field represents a series of related posts. The idea is to replace that string with an empty string to effectively remove it i.e. blank it out.

view of metadata yaml section of a blog post

My muscle memory for this type of task is to open the Search panel in the sidebar with the default keyboard shortcut of Ctrl + Shift + F. That is what I did. And this is what you see:

view of search panel in sidebar in vs code

I have the sidebar positioned on the right-hand side, in case you are confused by the screenshot!

You may habitually open this yourself by clicking the magnifying glass πŸ” on the sidebar.

The Search panel allows you to find text in the files of your project. And I hope, it can find and replace text, because I don't see no replace textfield. Do you? 🧐

Usually for this type of search functionality, there is an accompanying textfield to allow you to replace the text, or a toggle to show that textfield. I don't see any textfield or toggle!

Long story short. There is a toggle button to show the Replace textfield. It is to the left of the Search textfield, it has right chevron icon (or greather than symbol).

hovering over the toggle replace button in the of search panel in sidebar in vs code
How to toggle the replace textfield in the Search panel

Not so obvious to me!

man adjusting his jacket by sliding a toggle. being used in facetious way.
Toggle much? Toggling is like breathing to me, my friend. Check this out: I can hold my breath for 6 minutes. Time me!

In my case, I want to replace a text string. I can type it into the Search textfield and hit Enter to see if I get the 21 files that I expect first.

searching for the text "series: VS Code Gold" in the search panel in sidebar in vs code

That is the desired result.

I can leave the Replace text field blank and hit the Replace All button to execute the replacement. The button that is positioned to the right of the Replace textfield.

replace button in the search panel in sidebar in vs code

Alternatively, you can press Ctrl + Alt + Enter.

You will be prompted by a confirmation dialog that pops up to confirm the action.

confirmation dialog for replacement action

Hit the "Replace" button and the replacements are done! Hurrah!

In future, you skip directly to the replace functionality by using the command Seach: Replace in all files that will open the Search panel with the Replace field shown. Its keyboard shortcut Ctrl + Shift + H .

Advanced find and replace

What if I wanted to target my specific folder because the search is too wide, can I do that?

It is not obvious but you can do it. Again, it is hidden by default!

This time you need to hit the triple dots toggle (ellipses?) below the Replace field to reveal 2 more textfields: files to include and files to exclude.

replace button in the search panel in sidebar in vs code

I really don't like this UI!

Let's wrap it up. You may need to do a more advanced type of search. There are 3 buttons for more advanced functionality inside the Search textfield which are:

  1. Match Case (featuring the Aa icon)
  2. Match Whole Word (featuring the ab icon)
  3. Regular Expression (featuring the .* icon)
replace button in the search panel in sidebar in vs code

Also, the Replace textfield has an inline button to preserve cases in replacements (featuring the AB icon).

If you have more queries on this functionality, you can consult the "Search and Replace" section in the VS Code docs. I have covered some bits it hasn't, and vice versa.

One thing to note is that, you probably do not want to use the Search panel for all replacements. When working with code, you may be actually refactoring your code rather just than replacing something. There is another method that is more suitable for this scenario.

There are actually two methods to replace text globally

Actually, there are 2 ways to replace text globally.

Method 1 - Replace text fragments with the Seach: Replace in all files command

The first way as mentioned is that you can use the command Seach: Replace in all files that allows you to do text replacement through the Search panel with the Replace field shown.

This method is ideal for cases like mine where you are replacing some text in a markdown file or some free text. For code you may better off to use the second method.

Method 2 - Replace symbols with the Rename Symbol command

The second method is renaming a symbol. A symbol is an user-defined name in your code such as a variable or function name. Actually, I haven't seen a clear definition for it, that's my definition!

You can perform this action by running the command Rename Symbol, which opens up an inline dialog to rename the symbol. You may already know and use its keyboard shortcut F2 .

rename symbol command being done on javascript code

You will find that if you use the first method to change the name of something, you can break tangentially related code. There may be related import statements or filenames that rely on the symbol that you have changed (think filename and class name in Java). Really, Rename Symbol is a code-savvy find and replace action.

It depends on the language support extension (builtin or installed) whether this is supported for the language you are using. I found that it is available for most languages.

One area where support is a bit spotty is for templating languages. You will find languages that have embedded HTML such as JSX (see open GitHub issue) and Nunjucks have some issues with renaming HTML tags. This is because there is a related concept in VS Code called linked editing for HTML tags - if you edit the opening tag, then the closing tag will also be edited with a mirrored cursor.

Should I just do it on the command-line?

Actually as a linux user, I reached for a command-line tool! I circled back later to see if I missed a trick with the VS Code UI (or was tricked)! ☺️

If you are interested, I used the find command along with sed. There are both installed by default on most Unix-like operating systems.

This is the command I ran:

find src/posts -type f -exec sed -i 's/series: "VS Code Gold"//g' {} \;

I have not learned sed that well. It something I need to brush up on.

Final Word

I hope that this article demystifies finding and replacing text in VS Code! Certainly, I found the UI of the Search panel confusing. You may too!

I believe that it is valuable to consider if you are refactoring code rather than doing a straight-up text replacement before you dive in. It is worthwhile to get into the habit of choosing the method that suits the task best.

Now that I know how to do text replacement in VS Code, I may skip the command-line next time! I may have to re-read this post to remember because I don't do it a lot! πŸ˜„

Thanks for reading!