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

Question

欢迎使用一般提示。我的具体情况是一个 React 应用程序，用 WebPack 编译，有很多文件。如果我想在项目中移动文件或文件夹，是否有一种很好的方法可以使引用（例如 import 和 require 语句）自动更新？

使用 Atom 或 VSCode 的解决方案的奖励积分。

NPM 脚本也将起作用。谢谢。

Answer 1

这些年来，我使用了一些带有插件和 IDE 的文本编辑器，其中包括 Atom、VSCode、SublimeText 等，但我不断回到 Jetbrains 产品，原因之一是重构功能。

Webstorm是 Jetbrains 专用的 JavaScript IDE，无需任何额外的插件或 hack，就可以很好地做到这一点。

您所需要做的就是将文件或文件夹拖放到另一个位置，所有相关导入都会更新（确保在确认弹出窗口中勾选搜索引用）。这适用于es6 import和/或common js require()。

这还不是全部，您可以重命名变量、类、函数名称，无论您喜欢什么，只需确保通过选择文本来执行此操作，然后右键单击然后重构并重命名（您将在此菜单中看到您可以执行更多操作如果你想）

每当您要确认更改时，您都可以在弹出窗口中选择“在注释和字符串中搜索”选项（如果您愿意），这非常酷，因为您也可以使文档保持最新状态。

这个官方文档更深入，但一般来说，如果您执行上述操作，就足够了。

我想如果你没有足够的信心，启动服务器，（create-react-app 它会在你每次做出更改时重新加载，因为内置了热重载），如果你的重构出了问题，你就会知道马上就可以了。

仅供参考，我与 Jetbrains 没有任何关系，我只是喜欢这个产品。Webstorm 不是免费的（但是它非常便宜） - 如果您不想付费，可以选择 30 天试用版。

更新：

另请注意，此功能支持相对和绝对路径以及任何文件扩展名，因此包括.*scss等。

Answer 2

找到了几个 VSCode 的插件。就我个人而言，我没有使用过它们，但它们可能对你有用