CODEWITHSUNDEEP
javascriptvisual-studio-codewebstorm
Cerulean
Cerulean

Reputation: 6013

Visual Studio Code: Is there a way to automatically refactor JS imports when changing a directory (or file) name in the workspace?

I'm migrating to VSCode from WebStorm (for work reasons). In WebStorm, when you rename a folder/file in the list of folders/files, it will refactor your code so that that folder or file name change is reflected everywhere it is imported.

That is, if I change a folder 'components' to 'comps' from within the file explorer, all lines in all files which referenced 'components', e.g. 'import XYZ from ../components/XYZ' will be changed to 'import XYZ from ../comps/XYZ'. Is there a way to enable this in VSCode (either natively or perhaps an extension)?

Upvotes: 5

Views: 3429

Answers (2)

Mike Yan
Mike Yan

Reputation: 1699

Update: After some more tries, VS Code can actually rename paths after renaming folders. But it fails to do so sometimes. It will have some editor pop-out and it needs a little extra time to save the path change. Keep the editor open for a while to let the auto-refactoring finish.

I feel like it still does not support auto-refactoring of folder names until now.

But after enabling the settings of "Update Imports On File Move", it can be done by opening a new folder and moving files to the new folder (all paths can correctly refactor), instead of directly renaming the folder.

P.S. Sometimes the folder cannot auto-refactoring the correct path. Better close all opened files and consider moving files 1 by 1.

Upvotes: 0

Omar Bahareth
Omar Bahareth

Reputation: 906

Yes, there is a setting and it works when renaming or moving files, but I'm not sure about directories.

On Windows you can access VSCode's Settings panel by pressing CTRL, simultaneously.

Then search the Settings for Update imports and you should see something that looks like this:

import_setting_screenshot

It should be set to prompt by default when you move/rename a file.

Upvotes: 7

Related Questions