WebStorm 2024.2 Help

Code refactoring

Refactoring means updating the source code without changing the behaviour of the application. Refactoring helps you keep your code solid, dry, and easy to maintain. WebStorm offers a wide variety of code refactorings, which track down and correct the affected code references automatically.

Despite the differences in the goals and the workflow, all the WebStorm refactorings require some mandatory steps. Below is an overview of these main steps you will perform when refactoring your code.

Invoke refactoring

  1. Select an item to refactor. You can select a file/folder in the Project tool window or expression/symbol in the editor.

  2. Press Ctrl+Alt+Shift+T to open a list of refactorings that can be selected.

    Refactor This popup

    Alternatively, you can use a keyboard shortcut for a specific refactoring.

If you need to undo your refactoring, press Ctrl+Z.

Preview suggested refactoring changes

For some refactorings, WebStorm lets you preview the changes before applying them.

  1. Click Preview in the Refactoring Preview dialog to see potential changes (the list of usages where the refactoring will be performed).

    Refactoring dialog
  2. In the Find tool window that opens, check the changes that are going to be made. You can exclude Delete or remove Ctrl+X changes that you consider unnecessary.

    Refactoring preview
  3. Click Do Refactor to proceed with the changes.

Resolve conflicts

When WebStorm encounters problems with your refactoring, it opens a dialog with the list of conflicts and their brief descriptions.

Refactoring conflicts dialog
  • Click Refactor Anyway to ignore the problem and proceed.

  • Click Open in Find Window to open the conflict entries in the Find tool window and deal with them further.

  • In the Find tool window, you can apply the refactor by selecting Do Refactor or click Cancel and return to the editor.

    Refactoring conflicts tool window

    Configure refactoring settings

    1. In the Settings dialog (Ctrl+Alt+S) , select Editor | Code Editing.

    2. On the Code Editing page, in the Refactorings section, adjust the refactoring options and click OK.

    Copy, rename, and move files and folders

    With these refactorings you can make copies of files and folders with the same names or with new ones, store them in the same parent folders or in new ones, as well as move files and folders to other locations.

    Refactorings for files and folders are available in all types of applications.

    Copy a file or a folder

    1. Select the file or folder to copy in the Project tool window and press F5 or select Refactor | Copy from the context menu or from the main menu.

      Alternatively, select the file or the folder to copy in the Project tool window and drag it to the new folder with the Ctrl key pressed.

    2. In the dialog that opens, specify the new name of the file or the folder and the new parent folder, if applicable.

      To open a file, directory or package automatically after it is copied, select the Open copy in editor checkbox.

    Rename a file or a folder

    1. In the Project tool window, select the file or folder to rename and choose Refactor | Rename from the context menu or press Shift+F6.

    2. In the dialog that opens, type the new name of the file or folder.

      Rename file or folder
    3. To update the references to the file or folder in comments, strings, and text (for files), select the corresponding checkboxes.

      In addition to renaming the file itself, WebStorm can also look for the usages of the file name. If found, the changes you are making to the file name can also be applied to these usages.

      The usages are assigned to different categories which correspond to the options which you can turn on and off.

      Note that regardless of the options selected, the search scope (places where you search for the name occurrences) is always limited to the current entity (for example, a file, or a class) and the entities that the current one depends on.

    4. Click Refactor and examine the suggested changes in the dedicated tab of the Find tool window, as described in Previewing, adjusting, and applying the suggested changes above. Click Do Refactor when you are happy with the expected results.

    Move a file or a folder

    1. In the Project tool window, select the file or folder to move and choose Refactor | Move from the context menu or press F6.

    2. In the dialog that opens, specify the new parent folder. Choose an existing folder or type the name of a new one to be created.

    3. Select the Search for references checkbox to update the references to the moved file or folder.

    Delete files safely (Safe Delete)

    Unlike simple deletion of a file (Delete or Delete from the context menu), this refactoring makes sure that you do not delete files that are referenced in your source code. WebStorm looks for the usages of the file to be deleted and shows them in the Usages Detected dialog.

    1. In the Project tool window, select the file to remove and choose Refactor | Safe Delete from the context menu or press Alt+Delete.

    2. In the Safe Delete dialog that opens, select the corresponding checkboxes to look for usages of the file in comments and strings and for occurrences of the file in text.

    3. If any usages are detected, WebStorm lists them in the Usages Detected dialog.

      • To delete the file without viewing the found usages, click Delete Anyway.

      • To stop the refactoring, click Cancel.

      • To examine the potential conflicts, click View Usages. WebStorm opens a dedicated tab of the Find tool window where the usages are listed. Explore them, analyze the potential conflicts, and update your code as described in Previewing, adjusting, and applying the suggested changes above.

    Refactorings supported in WebStorm

    Copy

    From the Project tool window:

    • Refactor | Copy

    • F5

    Any context

    Move file

    Move folder

    From the Project tool window:

    • Refactor | Move

    • F6

    Any context

    Move Symbol

    From the editor:

    • Refactor | Move

    • F6

    • JavaScript

    • TypeScript

    Pull Class Members Up

    From the editor:

    • Refactor | Pull Members Up

    • JavaScript

    • TypeScript

    Rename file

    Rename folder

    From the Project tool window:

    • Refactor | Rename

    • Shift+F6

    • JavaScript

    • TypeScript

    Rename symbol

    From the editor:

    • Refactor | Rename

    • Shift+F6

    • JavaScript

    • TypeScript

    Safe Delete

    From the Project tool window:

    • Refactor | Safe Delete

    • Alt+Delete

    • JavaScript

    • TypeScript

    Introduce Parameter

    From the editor:

    • Refactor | Extract/Introduce | Parameter

    • Ctrl+Alt+P

    JavaScript

    TypeScript

    Introduce Field

    From the editor:

    • Refactor | Extract/Introduce | Field

    • Ctrl+Alt+F

    JavaScript

    TypeScript

    Introduce Field in JavaScript

    Extract Method

    From the editor:

    Refactor | Extract/Introduce | Method

    Ctrl+Alt+M

    JavaScript

    TypeScript

    Extract Method in JavaScript

    Introduce Variable

    From the editor:

    Refactor | Extract/Introduce | Variable

    Ctrl+Alt+V

    JavaScript

    TypeScript

    Style Sheets

    Introduce Variable in JavaScript

    Introduce Variable in TypeScript

    Introducing variables in Style Sheets

    Introduce Constant

    From the editor:

    Refactor | Extract/Introduce | Constant

    Ctrl+Alt+C

    JavaScript

    TypeScript

    Introduce Constant in JavaScript

    Introduce Constant in TypeScript

    Extract Superclass

    From the editor:

    Refactor | Extract/Introduce | Superclass

    JavaScript

    TypeScript

    Extracting a superclass in JavaScript

    Extracting a superclass in TypeScript

    Extract React Component

    From the editor:

    Refactor | Extract/Introduce | Extract Component

    React

    Extracting a React component

    Convert to Class Component

    From the editor:

    Refactor | Convert to Class Component

    React

    Converting a function to a class component

    Convert to Functional Component

    From the editor:

    Refactor | Convert to Functional Component

    React

    Converting a class to a functional component

    Extract Vue Component

    From the editor:

    Refactor | Extract/Introduce | Extract Vue Component

    JavaScript

    Extracting a Vue.js component

    Extract Type Alias

    From the editor:

    Refactor | Extract | Type Alias

    TypeScript

    Extracting a type alias in TypeScript

    Extract Include File

    From the selected block of code in the editor:

    Refactor | Extract Include File

    HTML, CSS

    Extracting include Files

    Extract Ruleset

    From the editor:

    press Alt+Enter and select Extract ruleset from the list.

    Style Sheets

    Extracting a ruleset

    Inline

    Refactor | Inline

    Ctrl+Alt+N

    JavaScript

    TypeScript

    Inline refactorings in JavaScript

    Inline refactorings in TypeScript

    Change Signature

    Refactor | Change Signature

    Ctrl+F6

    JavaScript

    TypeScript

    Change Signature in JavaScript

    Change Signature in TypeScript

    Last modified: 06 September 2024