Updating NgRx effects ofType in VS Code using multi-line regex
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]+`