Move Refactorings

Basics

The Move refactorings allow you to move JavaScript and TypeScript classes, functions, and variables as well as files and directories within a project. So doing, WebStorm tracks these movements and automatically corrects all references to the moved symbols in the source code.

Moving a file or a directory to another directory

1. Select the file or directory in the Project tool window.
2. Do one of the following:
   • On the main menu or the context menu of the selection, choose Refactor, and then choose Move.
   • Press F6.

   The dialog that opens depends on the type of the selected symbol.

3. In the To directory field, specify the folder to move the selected file or folder to. Choose an existing folder from the drop-down list or type the full path to the parent folder to be created.
4. To have the references to the selected file or folder updated according to the refactoring result, select the Search for references check box.

Moving JavaScript and TypeScript top-level symbols

The Move Symbol Refactoring for JavaScript and TypeScript works for classes, functions, and variables in ES6 modules. To invoke this refactoring:

1. Select the symbol to move.
2. Choose Refactor | Move on the main menu or on the context menu of the selection or just press F6.
3. In the dialog box that opens, specify the destination file.

In the example below, the function changeSelectedPlaylists is moved from the PlayerActions.js file to the PlaylistsActions.js file. Note that an import statement for the types that changeSelectedPlaylists requires is added to PlaylistsActions.js. Also all the imports of changeSelectedPlaylists in the other files are updated.