替换括号的匹配括号 vscode

Question

Is there a way to quickly replace matching brackets for matching parenthesis (or any other opening/closing characters) in vscode?

Something like ctrl + d but for matching brackets, parenthesis and such.

I'm currently replacing traditional JavaScript function definitions (redux action creators) for arrow functions, also I'm using airbnb rules in eslint in which the rule arrow-body-style needs to move the returning value immediately after the => and because most action creators return an object literal it needs to be surrounded by parenthesis, that's why I need a mechanism to make the replacements easy.

I'm trying to change.

export function hideServerErrors() {
 return {
  type: HIDE_SERVER_ERRORS,
 };
}

to

export const hideServerErrors = () => ({
 type: HIDE_SERVER_ERRORS,
});

Answer 1

For your specific example, try this:

First, bind this command to some keychord, like

{
    "key": "ctrl+alt+]",
    "command": "editor.action.selectToBracket"
}

Then, with the cursor just inside your first bracket (end of your first line of code), trigger the command, eg, Ctrl - Alt - ] in my example keybinding. The type your ( and you get:

export function hideServerErrors() ({
  return {
   type: HIDE_SERVER_ERRORS,
  };
 })

which I think is all you are trying to accomplish with this one step. Given that you have a few things to change a snippet might be the way to go to make all the changes at once.

Answer 2

I think the Quick and Simple Text Selection extension , as referenced in this tip on Smart Select may be able to help.

With the extension installed, if you want to replace { with ( :

1. Click somewhere inside the outer { s
2. Use Ctrl + k , Shift + { to select the entire inside contents
3. Ctrl + x to cut the contents
4. Ctrl + k , Shift + } to grab the braces
5. Backspace to delete the braces
6. ( to add open/close parens (assuming you have the default option enabled to add the closing parens)
7. Ctrl + v to paste the innards.

When I tried this, it worked but formatting was whacky, so perhaps not exactly what we're looking for...

In your case, it looks like you want to wrap the { type: HIDE_SERVER_ERRORS, } with parens, which is even easier - click inside, Use Ctrl + k , Shift + } to grab the parens included, and then ( to wrap that in parens... or mix & match as necessary...

(I think Smart Select can do the same thing on its own, but it takes more machinations/steps/combinations...)

Not 100% convenient, but in some more complicated scenarios, this should be much better than trying to select/match the braces yourself.

Answer 3

You may also use Regex:
Find: funcName\\('([\\s\\S\\r]*?)'\\)
Replace: funcName['$1']
it will replace things like funcName('test') to funcname['test']