CODEWITHSUNDEEP
javascripttypescriptvisual-studio-code
Frederik Claus
Frederik Claus

Reputation: 684

Keyboard shortcut to extract local variable in JS/TS in Visual Studio Code

I am looking for a shortcut that is available in Eclipse and called "extract local variable". It will assign the return value of the selected function invocation to a variable:

enter image description here

Is something similar available in VSC for Javascript and Typescript?

Upvotes: 12

Views: 6215

Answers (2)

John Tribe
John Tribe

Reputation: 1622

A bit better implementation. Inline variable and extract to const without selection.

How to :

  1. Open system action ">Preferences: Open Keyboard Shortcuts (JSON)"
  2. Paste code.

code:

[
  {

        "key": "ctrl+alt+n",
        "command": "editor.action.codeAction",
        "args": {
            "kind": "refactor.inline"
        }
    },
    {
        "key": "ctrl+alt+v",
        "command": "runCommands",
        "args": {
            "commands": [
                {
                    "command": "editor.action.selectToBracket",
                    "args": {
                        "selectBrackets": false
                    }
                },
                {
                    "command": "editor.action.codeAction",
                    "args": {
                        "kind": "refactor.extract.constant",
                        "apply": "first"
                    }
                }
            ]
        }
    }
]

Ps. Sorry for intelliJ shortcuts.

Upvotes: 0

ford04
ford04

Reputation: 74500

You can use the "Refactor..." shortcut Ctrl+Shift+R to extract the expression to a constant. Example:

function main(){
  return "foo".replace("o", "a")
}

Mark the expression "foo".replace("o", "a") or the whole line → "Extract to constant in enclosing scope", name it to test and the function will be refactored to the following:

function main(){
  const test = "foo".replace("o", "a")
  return test
}

There is also the "Quick Fix" command (Ctrl+.) for fixes and refactorings.

If you want an extra shortcut just for this action, define it manually in keybindings.json (docs):

  {
    "key": "shift+ctrl+alt+r",
    "command": "editor.action.codeAction",
    "args": {
      "kind": "refactor.extract.constant"
    }
  }

Upvotes: 17

Related Questions