How to perform a global find and replace of text (replace all occurences in all files) in VS Code
Tags: vscode, tooling, webdev, beginners
Published: 2022-12-28 15:00:53


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.

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/metadata-markdown-file.png" alt="view of metadata yaml section of a blog post" width="868" height="426" loading="lazy">

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

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/search-panel-sidebar-vscode.png" alt="view of search panel in sidebar in vs code" width="705" height="539" loading="lazy"/>

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).

<figure>
<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/toggle-replace-textfield-button-search-panel-vscode.png" alt="hovering over the toggle replace button in the of search panel in sidebar in vs code" width="705" height="539" loading="lazy"/>
<figcaption>How to toggle the replace textfield in the Search panel</figcaption>
</figure>

Not so obvious to me!

<figure>
<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/toggle-much.jpg" alt="man adjusting his jacket by sliding a toggle. being used in facetious way." width="1568" height="1076" loading="lazy"/>
<figcaption>Toggle much? Toggling is like breathing to me, my friend. Check this out: I can hold my breath for 6 minutes. Time me!</figcaption>
</figure>

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

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/search-for-string.png" alt='searching for the text "series: VS Code Gold" in the search panel in sidebar in vs code' width="705" height="552" loading="lazy"/>

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.

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/replace-all-button-search-panel.png" alt='replace button in the search panel in sidebar in vs code' width="705" height="552" loading="lazy"/>

Alternatively, you can press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Enter</kbd>.

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

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/replace-confirmation-modal.png" alt="confirmation dialog for replacement action" width="429" height="154" loading="lazy"/>

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 <kbd>Ctrl</kbd> + <kbd>Shift </kbd> + <kbd> H </kbd>.

## 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*.

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/toggle-search-details-search-panel-vscode.png" alt='replace button in the search panel in sidebar in vs code' width="705" height="552" loading="lazy"/>

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)
1. Match Whole Word (featuring the *ab* icon)
1. Regular Expression (featuring the *.\** icon)

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/search-advanced-buttons.png" alt='replace button in the search panel in sidebar in vs code' width="704" height="247" loading="lazy"/>

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](https://code.visualstudio.com/docs/editor/codebasics#_search-and-replace). 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.

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.

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 <kbd> F2 </kbd>.

<img src="https://www.roboleary.net/assets/img/blog/2022-12-28-global-find-and-replace-all-text-in-vscode/rename-symbol.png" alt='rename symbol command being done on javascript code' width="713" height="204" loading="lazy"/>

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](https://github.com/microsoft/TypeScript/issues/51832)) 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](https://www.roboleary.net/vscode/2020/08/05/dont-need-extensions.html#1-auto-renaming-html-tags#1-auto-renaming-html-tags) - if you edit the opening tag, then the closing tag will also be edited with a mirrored cursor.

That's how you can replace text in VS Code. As a linux user, I actually did the find and replace operation on the command-line, and circled back later to see if I missed a trick in VS Code! If you are interested, I used the [`find` command](https://en.wikipedia.org/wiki/Find_(Unix)) along with [`sed`](https://en.wikipedia.org/wiki/Sed) (installed by default on most [Unix-like](https://en.wikipedia.org/wiki/Unix-like) operating systems):

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

Same, same, but different!

## Final Word

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

I believe too 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!