ReSharper Help

Refactorings for JavaScript

ReSharper provides the following refactorings for JavaScript:

To perform a refactoring

  1. Set your 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:
    • On the main menu, choose ReSharper | Refactor, and then select a desired refactoring.
    • 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.  
    • On the main menu, choose  ReSharper | Refactor | Refactor This, or press Ctrl+Shift+R to display the list of applicable refactorings, and select one of them. You can also choose Refactor This in the context menu of a selection.
    • If a refactoring could fix a code issue that ReSharper detects and highlights in the editor, the corresponding action indicator Coding_Assistance__Context_Actions__icon_refactor appears to the left of the code issue. You can click on this indicator or press Alt+Enter to check the suggested refactoring and apply if if necessary.
    • Use default keyboard shortcuts assigned to specific refactorings, or assign custom shortcuts to your favorite refactorings.
  3. If the selected refactoring requires user input, the refactoring wizard opens. Note that the wizard's dialog boxes 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, etc.), 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, see Resolving Conflicts in Refactorings.

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

Introduce Variable

The Introduce variable refactoring allows creating a new local variable based on a selected expression. Before the refactoring is applied you are prompted to decide whether to replace all occurrences of the expression or the selected one.

The algorithm of introducing variable is almost the same as described in the Refactorings: Introduce variable topic.

Consider the example below:

ReSharper_by_Language__JavaScript__Refactorings__Introduce_variable_01
ReSharper prompts you to decide whether to replace all occurrences or the selected one.
ReSharper_by_Language__JavaScript__Refactorings__Introduce_variable_02
ReSharper replaces specified occurrences with the use of local variable.
ReSharper_by_Language__JavaScript__Refactorings__Introduce_variable_03

Rename

ReSharper distinguishes functions and variables. According to the type of the property that should be refactored, the process of renaming goes on in two possible ways.

To rename a function, written by you, defined in js module or a library one, follow the procedure steps in the Refactorings: Rename topic.

When you rename a variable, refactoring is performed without dialogs.

Consider the following example:

ReSharper_by_Language__JavaScript__Refactorings__Rename_01
As you are typing, all usages of the variable are being updated accordingly.
ReSharper_by_Language__JavaScript__Refactorings__Rename_02

See Also

Last modified: 30 June 2015