Updating NgRx effects ofType in VS Code using multi-line regex

Vijay Goel, MD
Building the Stack
Published in
1 min readJan 8, 2019

I’ve never done multi-line search and replace in VS Code. The NgRx 7.0 breaking change made this a useful skill action.ofType(Stuff).pipe(map(other => otherStuff)) now needs to place ofType in the pipe, action.pipe(ofType(Stuff),map(other => otherStuff))

So I did the upgrade, recompiled and tried to do the normal search and replace. Realized that where I had a multi-line bit of code for .ofType or .pipe that the normal search function didn’t recognize the code past the first line break

actions
.ofType(Stuff)
.pipe(map(other => otherStuff))

Oh Prettier. Thou hast destroyed me!

Multi-line regex to the rescue. No additional marketplace extension needed (hedge: I may have already installed one that does it — please let me know in the comments). Here’s what I used to get ofType into the pesky pipe and add a trailing comma. Manually imported the ofType from @ngrx/effects in each file — would love any suggestions for how to make this work more automated.

search:

actions\$[\s\r][\s]+\.ofType\((.+?)\)[\s\r][\s]+\.pipe\(

replace:

actions$.pipe(ofType($1),

Some tricks:

  • The search section needs the regex to be escaped (i.e., adding \ in front of special characters and punctuation).
  • Want to have a wildcard? You’ll use `(.+?)`. The replace section uses a string and you can put the wildcard content in using $1, $2 etc.
  • Want a mix of spaces, next line, and spaces? This worked for me: `[\s\r][\s]+`

--

--

Vijay Goel, MD
Building the Stack

Improving operations via technology and structured thinking (current focus chefs and catering)