Skip to content

Improving refactoring discoverability and UX #34930

Closed

Description

Problem

Consider the following code:

function foo(a: any) {
    return a + 20 * 10;
}

TypeScript currently only returns refactorings for extract function and extract constant if you exactly select the range of the given expression. To extract a + 20 * 10 to a constant for example, I have to fully select a + 20 * 10.

There are a few limitations with this approach:

  • It can be difficult to discover refactorings and understand exactly what expression I need to select.
  • I have to take extra time to make the correct selection.
  • There is no feedback on why a given refactoring may not be available.

On the VS Code side we'd like to improve the discoverability and general UX around refactorings, and believe we need some new TS server work to make this happen.

Ideas

This issue in intended to be high level discussion about improving refactorings. We can split out specific proposals into their own issues.

As background, VS Code has two ways that refactorings can be requested:

  • Automatically as the user makes selections in the document. These are shown under the lightbulb menu
  • Explicitly using a keybinding or command.

Here are some initial ideas about improving both cases

Be less strict about selection range for automatic refactorings

To example cases:

  • If I select 20 * 1 in the example, automatically expand the refactor target to the subexpression 20 * 10
  • If I select the a + 20 * 10; with the trailing semicolon, automatically shrink the refactor to just the target expression a + 20 * 10.

For basic cases like the above, it may make sense to always perform some basic massaging of the selection. This would mean that these refactorings would show in VS Code's automatic lightbulb

More aggressive expanding of selections for explicit refactorings

If I explicitly request a refactoring such as extract constant, we could always try to expand the selection to the minimal extractable expression and possibly show multiple extract constant refactorings if multiple parent expressions could all be extracted.

In the example code, if I simply have the cursor before a in the expression a + 20 * 10 (with no selection), when I try to trigger extract constant then we could show refactorings for: extract expression 'a + 20 * 10' to constant

Feedback on why an explicitly requested refactoring is not available

When I explicitly request refactorings on a selection that cannot be refactored, we should show a message about why the refactoring is not possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Labels

CommittedThe team has roadmapped this issueRescheduledThis issue was previously scheduled to an earlier milestoneSuggestionAn idea for TypeScript

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions