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.
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:
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).
Not so obvious to 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.
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.
Alternatively, you can press Ctrl + Alt + Enter.
You will be prompted by a confirmation dialog that pops up to confirm the 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.
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:
- Match Case (featuring the Aa icon)
- Match Whole Word (featuring the ab icon)
- Regular Expression (featuring the .* icon)
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.
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 F2 .
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.
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 along with sed (installed by default on most Unix-like operating systems):
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!
Top comments (3)
Thanks @rob. I have your posts in archive for the same reason. Sometimes doing a wide variety of things and that on a string of different systems and platforms helps one to forget the shortcuts and work-arounds.
I do code and I do use VS, but it's about 30%, if not 20% of what I use. Their UI is a tad vague but not nearly as shy as Adobe's product interfaces. Man, finding basic actions there can be a PITA!
Then you move to AWS and try to set-up things there and there we go again...
The worst is when they change the UI layout while you were "sleeping", and "tomorrow" you try step A-B-n again and discover "something is wrong ... where's that icon? Damn, I'm sure it was here last time... "Soon, you start thinking that you have gone crazy from drinking one glass of vino to much the previous evening!
Functionality in these apps is so vast, so I guess making lists like yours is the best way to go.
Ya, it can be surprising Andre! As the chinese proverb goes, "The faintest ink is more powerful than the strongest memory."
That is why command-line tools can be so valuable - they are focused and their interfaces stay the same.