reactjs - How can I refactor by moving files in a JavaScript project and have references update automatically? - Stack Overflow

admin管理员组

文章数量:1278653

General tips are wele. My specific situation is a React app, piled 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.

General tips are wele. My specific situation is a React app, piled 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.

• javascript
• reactjs
• webpack
• refactoring

Share Improve this question Follow asked Sep 8, 2020 at 6:47 Alan H.Alan H. 16.6k1717 gold badges8484 silver badges115115 bronze badges 4

• 2 There may be plugins to do that but some IDEs do it automatically - for example, IntelliJ which automatically updates file imports when a file is moved. I've only noticed this with require/import statements so if you're referencing files in a config file or so, it might not update them there. – paulosullivan22 Commented Sep 23, 2020 at 17:31
• 2 Are you looking for something like this available in VS Code ( javascript.updateImportsOnFileMove.enabled ) ? code.visualstudio./updates/… – RPDP Commented Sep 24, 2020 at 19:58
• @RPDP Do you want to expand this into a full answer? – Alan H. Commented Sep 24, 2020 at 23:19
• @AlanH. Have expanded it as an answer below. – RPDP Commented Sep 25, 2020 at 1:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I used a few text editors with plugins and IDE's during the years, this includes Atom, VSCode, SublimeText, etc. but keep ing 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 mon 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 ments 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.

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

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

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/ments 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 bees more plex 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.

本文标签：