DEV Community

loading...
Cover image for VS Code: Search-and-Replace Regex

VS Code: Search-and-Replace Regex

bob.js
REAL, FUN, GEEK who is passionate about Front-End!
Updated on ・2 min read

This is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it. Therefore, I am writing this article as my own reference to a useful tool with VS Code.

Details (Regex Flavor)

The find widget is simply using JavaScript's regular expressions as specified in ECMAScript 5 (the runtime of VS Code) ...

Reference

VS Code has the option to opt into using the Perl based PCRE2 engine. This can be enabled through the settings config.

This allows more advanced regex operations like lookaheads and backreferences. The regex still has to be valid JavaScript regex.

VS Code does support regular expression searches, however, backreferences and lookaround aren't supported by default. But you can enable these with the setting search.usePCRE2. This configures ripgrep to use the PCRE2 regex engine. While PCRE2 supports many other features, we only support regex expressions that are still valid in JavaScript, because open editors are still searched using the editor's JavaScript-based search.

Use Find-And-Replace

You can press Ctrl + H on Windows and Linux, or ⌥⌘F on Mac to enable search and replace tool.

Search-And-Replace Image

Reference

Basically, with some code needing a Search-and-Replace pattern applied ...

const demo = {
  test1: 'test1',
  test2: 'test2',
  test3: 'test3',
  test4: 'test4',
  test5: 'test5',
  test6: 'test6'
};
Enter fullscreen mode Exit fullscreen mode

... with this code, assuming I want to create an index that uses the number within the string, we can use a regex like ... '(.*?)(\d+)'. This regex will select all the text within and including the single-quotes.

If I want something like test1: 'test1', index: 1, then a simple replace of the selection above would become ... '$1$2', index: $2 and the code when all are replaced becomes ...

const demo = {
  test1: 'test1', index: 1,
  test2: 'test2', index: 2,
  test3: 'test3', index: 3,
  test4: 'test4', index: 4,
  test5: 'test5', index: 5,
  test6: 'test6', index: 6
};
Enter fullscreen mode Exit fullscreen mode

Conclusion

Because this is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it, I wrote this article as my own reference to a useful tool with VS Code.

Discussion (14)

Collapse
marcohern profile image
Marco Hernandez

What if I need to replace something with $? For example, replace '$var' with '$this->var=$var', the regex to search is easy, the problem is the replacement, I tries with '$this->$1 = $$1', it does not work properly. So how do we go about it?

Collapse
rfornal profile image
bob.js Author

OK. I see a couple of things going on here.

First, you state you are using '$var', for replacement, this should be '(\$[a-zA-Z]*)'.

  • The parens allow for the selection as $1
  • The backslash allows VS Code to correctly find '$var' in the content as REGEX.

Second, to use '$this->$1 = $$1' as a pattern for replacement ...

  • The selection above in my first response would need changed to something like this '\$([a-zA-Z0-9]*)' to allow for selection of text that starts with a dollar sign.
  • The replacement pattern should be changed to '\$this->=>$1 = $$$1'. The dollar sign in the replacement is "escaped" using the double-dollar-sign (see HERE)
Collapse
rfornal profile image
bob.js Author

Article written and posted ... here: dev.to/rfornal/vs-code-search-and-...

Collapse
rfornal profile image
bob.js Author

Having provided a reply, I think I'll write this up as a separate article for clarity. I'll post here when it's complete ... probably in the next day or two. Thanks for the GOOD question!

Collapse
hasantezcan profile image
Hasan TEZCAN

Is that any way to replace regex expression with vsCode extension API?

Collapse
rfornal profile image
bob.js Author

I'm not quite sure what this question is.

  • Are you asking if a regex expression can be generated with a Visual Studio Code extension? Probably.
  • Are you asking if a regex expression can interact with a Visual Studio Code extension in some way? I don't think so.
Collapse
hasantezcan profile image
Hasan TEZCAN

While using vs code you can find and replace some word using with regex. We are using this usage in our daily lives. But my question is Can I do it with vscode API. I want to make a vscode extension with this endpoint So if it exists

Thread Thread
rfornal profile image
bob.js Author

That's a question I'm not able to answer. I know VS Code by usage as a developer ... not by working on VS Code Extensions. I would assume there would be a way to interact with it via API. You might have to come up with an example and contact the team working on VS Code (it is Open Source, so shouldn't be an issue).

Collapse
slinkywitch profile image
slinkywitch

Thanks for this! First time I've seen this explained clearly.

Collapse
akp profile image
akp_200

this is really helpful. I can easily understand and even apply in a different situation

Collapse
caleb15 profile image
Caleb Collins-Parks

Where is the option for Perl based PCRE2 engine? I looked in the settings but didn't see it.

Collapse
rfornal profile image
bob.js Author

OK. I will start by saying that I am not an expert here.

It looks like VS Code, at one time, had a setting to use PCRE2. It has since been deprecated, and PCRE2 is automatically used as a fallback when the default engine doesn't support a feature.

Found this information HERE.

Collapse
zenitk profile image
Zenit Kovačević

Took me a while to figure that we actually "declare" a param in our regex with ( and ).

Thanks! By helping yourself you also helped others.

Collapse
rfornal profile image
bob.js Author

I’ll go back and look at the article to see if I can clarify that better.