javascript - Replace matching brackets for parenthesis vscode - Stack Overflow

admin管理员组

文章数量:1345107

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,
});

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,
});

• javascript
• visual-studio-code
• keyboard-shortcuts

Share Improve this question Follow edited Aug 30, 2018 at 3:44 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Jul 11, 2018 at 19:34 Rodrigo GarcíaRodrigo García 1,4171616 silver badges2626 bronze badges 6

• Have you found the answer? I am very interested in it too :-) – SaidAkh Commented Aug 31, 2018 at 8:46
• I haven't, very neat feature to implement right? – Rodrigo García Commented Aug 31, 2018 at 13:33
• 1 Perhaps you should make a feature request. – ivvi Commented Oct 4, 2018 at 6:36
• @seron I'll give it a try, thank you for your suggestion – Rodrigo García Commented Oct 4, 2018 at 9:29
• 2 This extension seems to handle that and a little more: marketplace.visualstudio./items?itemName=pustelto.bracketeer – gelbander Commented Apr 10, 2020 at 8:00

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

Remove brackets

Since vscode v1.77 (april 2023) there is build in action that can help in this case.

Remove Brackets
editor.action.removeBrackets

It deletes both matching parentheses by one hotkey.

By default bound to Ctrl+Alt+Backspace.

Changing brackets with this mand

1. Put cursor to bracket you want to change
2. Press Ctrl+Shift+Alt+\ to select content inside brackets
3. Press new bracket (that will automatically surround selected content)
4. Put cursor to old bracket again
5. Press Ctrl+Alt+Backspace to delete old brackets.

For your specific example, try this:

First, bind this mand to some keychord, like

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

Then, with the cursor just inside your first bracket (end of your first line of code), trigger the mand, e.g., 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 acplish 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.

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/binations...)

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

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

本文标签： javascriptReplace matching brackets for parenthesis vscodeStack Overflow