如何通过移动 JavaScript 项目中的文件进行重构并自动更新引用？

Question

General tips are welcome. My specific situation is a React app, compiled with WebPack, with lots of files. If I want to move a file or folder within the project, is there a good way to do this such that references, such as import & require statements, update automatically?

Bonus points for solutions using Atom or VSCode.

NPM scripts will also work. Thanks.

Answer 1

I used a few text editors with plugins and IDE's during the years, this includes Atom, VSCode, SublimeText, etc. but keep coming back to Jetbrains products and one of the reason is the refactoring capabilities.

Jetbrains dedicated JavaScript IDE, Webstorm does it very well without any additional plugins or hacks.

All you need to do is drag and drop your file or folder to another location and all the relevant imports will be updated (make sure search for references is ticked in the confirmation pop up). This applies to both es6 import and/or common js require() .

This is not all, you can rename variables, class, function names, whatever you like, just make sure you doing it by selecting the text , then right click then refactor and rename (you'll see in this menu you can do much more if you want)

Whenever you about to confirm your changes you can select the option in the pop-up that is "search in comments and strings" if you want which is really cool as you can keep your documentation up to date as well.

This official documentation goes more in deep, but generally if you do the above, it will be enough.

I guess if you don't feel confident enough, start up the server, with (create-react-app it will reload every time you make a change as hot reloading is built in) and if something goes wrong with your refactoring you will know it straight away.

Just fyi I am not associated with Jetbrains, I just like the product. Webstorm is not free (however it's very cheap) - go for the 30 day trial version if you don't wish to pay.

UPDATE:

Also note, this feature support both relative and absolute paths as well as any file extensions, so including .*scss etc.

Answer 2

Found a couple of plugins for VSCode. Personally, I haven't used them but they might work for you

• https://github.com/cmstead/js-refactor
• https://github.com/jakob101/RelativePathRefactor

Answer 3

VS Code has an option to update imports on file move or rename. This feature was enabled with the May 2018 Release. Whenever a file is moved, VS code detects and asks for confirmation to update the import references also.

Visual Studio Code - May 2018

You can control the prompting behavior with the javascript.updateImportsOnFileMove.enabled and typescript.updateImportsOnFileMove.enabled settings.

This usually updates the import statements, but it might not update any strings variables/comments references to the moved files.

NOTE: It worked only for js/ts files. For other types, like scss file, it does not update the @imports.

Most editors/plugins do not support full fledged tracking and refactoring of move/rename actions for all file types, as it becomes more complex and ambiguous when relative paths, absolute paths are used in the same project.

To summarize, for moving a file or folder, there are two instances the references needs to be updated.

1. In the moved file itself, if any import is using a relative path
2. Other files which import the moved module/files

I do not think the first is supported in VS Code (and probably in other editors too). The second one is supported in VS Code, but only for js/ts file imports.