Refactoring

    For example, a common refactoring used to avoid duplicating code (a maintenance headache) is the refactoring, where you select source code that you’d like to reuse elsewhere and pull it out into its own shared method.

    Refactorings are provided by a language service and VS Code has built-in support for TypeScript and JavaScript refactoring through the TypeScript language service. Refactoring support for other programming languages is provided through VS Code which contribute language services. The UI and commands for refactoring are the same across languages, and in this topic we’ll demonstrate refactoring support with the TypeScript language service.

    In VS Code, Code Actions can provide both refactorings and Quick Fixes for detected issues (highlighted with green squiggles). An available Code Action is announced by a lightbulb near the source code when the cursor is on a squiggle or selected text region. Clicking on the Code Action lightbulb or using the Quick Fix command will display Quick Fixes and refactorings.

    If you’d just like to see refactorings without Quick Fixes, you can use the Refactor command (kb(editor.action.refactor)).

    Refactoring actions

    Select the source code you’d like to extract and then click on the lightbulb in the gutter or press (kb(editor.action.quickFix)) to see available refactorings. Source code fragments can be extracted into a new method, or into a new function at various different scopes. During the extract refactoring, you will be prompted to provide a meaningful name.

    When working with classes, you can also extract a value to a new property.

    Renaming is a common operation related to refactoring source code and VS Code has a separate Rename Symbol command (kb(editor.action.rename)). Some languages support rename symbol across files. Press kb(editor.action.rename) and then type the new desired name and press . All usages of the symbol will be renamed, across files.

    Keybindings for Code Actions

    The editor.action.codeAction command lets you configure keybindings for specific Code Actions. This keybinding, for example, triggers the Extract function refactoring Code Actions:

    Code Action kinds are specified by extensions using the enhanced CodeActionProvided API. Kinds are hierarchical, so "kind": "refactor" will show all refactoring Code Actions, whereas "kind": "refactor.extract.function" will only show Extract function refactorings.

    Using the above keybinding, if only a single "refactor.extract.function" Code Action is available, it will be automatically applied. If multiple Extract function Code Actions are available, we bring up a context menu to select them:

    You can also control how/when Code Actions are automatically applied using the apply argument:

    Valid values for :

    • "first" - Always automatically apply the first available Code Action.
    • "ifSingle" - Default. Automatically apply the Code Action if only one is available. Otherwise, show the context menu.
    • "never" - Always show the Code Action context menu, even if only a single Code Action is available.

    When a Code Action keybinding is configured with "preferred": true, only preferred Quick Fixes and refactorings are shown. A preferred Quick Fix addresses the underlying error, while a preferred refactoring is the most common refactoring choice. For example, while multiple refactor.extract.constant refactorings may exist, each extracting to a different scope in the file, the preferred refactor.extract.constant refactoring is the one that extracts to a local variable.

    This keybinding uses to create a refactoring that always tries to extract the selected source code to a constant in the local scope:

    You can find extensions that support refactoring by looking in the VS Code Marketplace. You can go to the Extensions view (kb(workbench.view.extensions)) and type ‘refactor’ in the search box. You can then sort by install count or ratings to see which extensions are popular.

    Tip: The extensions shown above are dynamically queried. Click on an extension tile above to read the description and reviews to decide which extension is best for you.

    Next steps

    Lightbulbs (Code Actions) are only shown when your cursor hovers over the text showing the error. Hovering over the text will show the error description, but you need to move the cursor or select text to see lightbulbs for Quick Fixes and refactorings.