Use snippets for extract refactorings

[mjbvz]

Feature request

🔎 Search Terms

• Refactor / refactorings
• Code action

Problem

Today our extract refactorings run in two stages:

1. Extract to a new constant / function using a placeholder symbol name (such as newFunction)
2. Rename the placeholder using a normal rename operation.

This has a few problems:

• If the user quickly types, they end up typing into the editor before the rename input box shows up. This breaks the rename
• This requires two calls to TSServer
• The rename UX can feel a bit jarring since it shows a new box to users

Proposal

VS Code now supports including snippets in the workspace edits that extensions provide on refactorings. My proposal is that TS Server uses snippet syntax in the edit returned for extract method/constant so that users immediately start renaming the new function/constant instead of using the two phase flow we have to day

Example

For the TS:

1 + 2;

If I select 1 + 2 and select the extract to function in global scope refactoring, I should get the following snippet (note that I'm using VS Code's snippet annotation here):

${1:newFunction}();$0

function ${1:newFunction}() {
    1 + 2;
}

Typing would update both places where newFunction is used: