WebStorm 6.0.1 Web Help

The Extract Variable refactoring puts the result of the selected expression into a variable. It declares a new variable and uses the expression as an initializer. The original expression is replaced with the new variable (see the examples below).

To perform this refactoring, you can use:

You can select the expression to be replaced with a variable yourself. You can as well use smart expression selection. In this case WebStorm will help you select the desired expression.

This refactoring is also available for JavaScript and SASS.

To extract a variable using in-place refactoring
  1. In the editor, select the expression to be replaced with a variable. You can do that yourself or use the smart expression selection feature to let WebStorm help you. So, do one of the following:
    • Highlight the expression. Then choose Refactor | Extract | Variable from the main or the context menu.

      Alternatively, press Ctrl+Alt+VCtrl+Alt+V.

    • Place the cursor before or within the expression. Choose Refactor | Extract Variable from the main or the context menu, or press Ctrl+Alt+VCtrl+Alt+V.

      In the Expressions pop-up menu, select the expression. To do that, click the required expression. Alternatively, use the UpUp and DownDown arrow keys to navigate to the expression of interest, and then press EnterEnter to select it.

      Note

      The Expressions pop-up menu contains all the expressions appropriate for the current cursor position in the editor.

      When you navigate through the suggested expressions in the pop-up, the code highlighting in the editor changes accordingly.

  2. If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences in the Multiple occurrences found pop-up menu. To select the required option, just click it. Alternatively, use the UpUp and DownDown arrow keys to navigate to the option of interest, and press EnterEnter to select it.
  3. Specify the name of the variable. Do one of the following:
    • Select one of the suggested names from the pop-up list. To do that, double-click the suitable name. Alternatively, use the UpUp and DownDown arrow keys to navigate to the name of interest, and EnterEnter to select it.
    • Edit the name by typing. The name is shown in the box with red borders and changes as you type. When finished, press EscapeEscape.
To extract a variable using the dialog box

If the Enable in place refactorings check box is cleared in the Editor settings, the Extract Variable refactoring is performed by means of the dialog box.

enableInplaceRefactoringCleared

  1. In the editor, select the expression to be replaced with a variable. You can do that yourself or use the smart expression selection feature to let WebStorm help you. So, do one of the following:
    • Highlight the expression. Then choose Refactor | Extract | Variable from the main or the context menu.

      Alternatively, press Ctrl+Alt+VCtrl+Alt+V.

    • Place the cursor before or within the expression. Choose Refactor | Extract Variable from the main or the context menu, or press Ctrl+Alt+VCtrl+Alt+V.

      In the Expressions pop-up menu, select the expression. To do that, click the required expression. Alternatively, use the UpUp and DownDown arrow keys to navigate to the expression of interest, and then press EnterEnter to select it.

      Note

      The Expressions pop-up menu contains all the expressions appropriate for the current cursor position in the editor.

      When you navigate through the suggested expressions in the pop-up, the code highlighting in the editor changes accordingly.

  2. In the Extract Variable Dialog dialog:
    1. Specify the variable name next to Name. You can select one of the suggested names from the list or type the name in the Name box.
    2. If more than one occurrence of the selected expression is found, you can select to replace all the found occurrences by selecting the corresponding check box. If you want to replace only the current occurrence, clear the Replace all occurrences check box.
    3. For ActionScript, you can choose to introduce a constant rather than a variable. To do that, select the Make constant check box.
    4. Click OK.

See Also

Procedures:

Reference:

Web Resources: