Search code examples
javascriptvisual-studio-codekeyboard-shortcuts

Replace matching brackets for parenthesis vscode


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

Solution

  • 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 command

    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.