Code refactoring

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.

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.

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

Gif

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

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.

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.

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

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.

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

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

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.

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.