Refactorings for JavaScript

Last modified: 27 March 2023

warning

Starting from ReSharper 2022.2, active development of productivity features for JavaScript, TypeScript, JSON, CSS, and Protobuf is suspended, and these features are disabled by default. To enable them, select the corresponding checkboxes on the Environment | Products & Features page of ReSharper options ( Alt+R, O ): JavaScript and TypeScript, CSS Language, and Protobuf.

tip

In addition to refactorings, ReSharper provides a number of smaller local code transformations available with context actions.

Perform a refactoring

  1. Place the caret at a symbol, select a code fragment that you want to refactor, or select an item in a tool window.

  2. Do one of the following:

    • In the main menu, choose ReSharper | Refactor, and then select a desired refactoring. The list of refactorings available in this menu depends on the current context. If ReSharper cannot suggest any refactorings for the context, the entire menu is disabled.

    • In the editor, File Structure window, or other ReSharper window, right-click the item you want to transform, choose Refactor from the context menu, and then select the required refactoring.

    • In the main menu, choose ReSharper | Refactor | Refactor This, or press to display the list of applicable refactorings, then select one of them. You can also choose Refactor This in the context menu of a selection.

    • Use default keyboard shortcuts assigned to specific refactorings, or assign custom shortcuts to your favorite refactoring commands.

  3. If the selected refactoring requires user input, the refactoring wizard opens. Note that the wizard's dialogs are not modal, so you can edit the code while the wizard is open.

    To roll back refactoring actions, the wizard provides the option  To enable Undo, open all files with changes for editing. If you select this option, ReSharper opens all modified files in new editor tabs and enables you to roll the refactoring back. In this case, you will need to save the changes yourself. If this option is not selected, ReSharper saves modified files automatically, without opening them.

  4. If a refactoring operation would cause code conflicts (such as duplicate names, visibility conflicts, and so on), the wizard displays the list of conflicts on the last step, before you apply the refactoring. For some conflicts, the wizard can also suggest quick-fixes. For more information, refer to Resolve conflicts in refactorings.

note

Visual Studio provides its own Refactor menu, which is available from both main and context menus. By default, ReSharper hides the native Visual Studio menu replacing it with its own one. To make the Visual Studio menu accessible, select the Hide overridden Visual Studio menu items checkbox on the Environment | Editor | Visual Studio Features page of ReSharper options.

Some refactorings are available immediately after you modify code in the editor. For more information, refer to Inplace refactorings

Introduce variable

This refactoring allows you to create a new local variable or constant based on a selected expression, initialize it with the expression, and finally replace all occurrences of the expression in the method with references to the newly introduced variable.

You can also invoke this refactoring with the dedicated shortcut .

In the example below, we use this refactoring to replace two occurrences of the same string with a variable:

Before refactoring

function logError() {
    alert("Something has failed...");
    if (typeof window.console != 'undefined') {
        console.log("Something has failed...");
    }
}

After refactoring

function logError() {
    var message = "Something has failed...";
    alert(message);
    if (typeof window.console != 'undefined') {
        console.log(message);
    }
}

Introduce variable for substring

This refactoring helps you quickly move a part of a string to a separate variable.

If the ECMAScript 6 is selected as a language level in ReSharper settings, the refactoring will add a new template argument for the extracted substring. If the language level is ECMAScript5, then string concatenation is used:

Before refactoring

After refactoring (ECMAScript 6)

After refactoring (ECMAScript 5)

var helloWorld = "Hello, World";
let world = "World";
var helloWorld = `Hello, ${world}`;
var world = "World";
var helloWorld = "Hello, " + world;

Inline variable

This refactoring allows you to replace all occurrences of a variable in the code with its initializer. Note that the refactoring should be only applied if the variable value stays unchanged after initialization.

You can also invoke this refactoring with the dedicated shortcut .

In the example below, we use this refactoring to inline the reversed variable.

Before refactoring

function reverseString(input) {
    var reversed = input.split("").reverse().join("");
    return reversed;
}

After refactoring

function reverseString(input) {
    return input.split("").reverse().join("");
}

Move to resource

In JavaScript projects created from Visual Studio templates (for example Apache Cordova), ReSharper allows moving string literals to resource files. ReSharper can optionally find all identical strings in the desired scope and replace them with the resource usage. To perform this refactoring, you need to have at least one resource file in your project (it normally has the .resjson extension).

You can also invoke this refactoring with the dedicated shortcut .

Rename

This refactoring allows you to change name of any symbol or project in your solution. All references to and usages of the symbol will be updated automatically.

You can also invoke this refactoring with the dedicated shortcut .

You can use this refactoring to rename the following JavaScript entities: object literals, properties of an object literal, functions, function parameters, variables

See also

Procedures