在Visual Studio代码中提取TypeScript方法

Question

Is there a possibility to extract a method with a shortcut in Visual Studio Code when writing TypeScript?

function printOwing() {
  printBanner();

  // Print details
  console.log("name:  " + name);
  console.log("amount " + amount);
}

So that with one shortcut I could extract the printDetails() :

function printOwing() {
  printBanner();
  printDetails();
}

function printDetails() {
  console.log("name:  " + name);
  console.log("amount " + amount);
}

Similar to Eclipse → right click → Refactor → Extract method… .

Answer 1

Extract method and extract function were added in Visual Studio Code 1.16: JavaScript and TypeScript refactorings

To use them, select a block of code and then either click on the lightbulb or use the editor.action.quickFix action ( cmd . ) to view the list of refactorings.

You can also setup a keybinding for extract method :

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

Answer 2

Visual Studio Code doesn't ship with a default shortcut to extract methods in a TypeScript file (although it does look like it is supported in C# files ).

You might be able to find an extension with this capability on the marketplace , but I was not able to.

The "refactorix" and "JS Refactorings" extensions have an extract variable, but no extract method. So close!