2023 年 9 月,vscode 支持了
一键把一段代码从一个文件移到另一个文件,且同步更新所有引用和
import
!
话不多说,大家看官网的 GIF,问题我会在后面指出
![](https://file.jishuzhan.net/article/1701512574136225794/d5f8e2d8ae8f4c9aae8f006b275dd493.webp)
操作流程
第一步,点击变量,看到灯泡
![](https://file.jishuzhan.net/article/1701512574136225794/00ea6634562a49949ba3f5e27a548442.webp)
第二步, 点击灯泡,选择 Move to file
![](https://file.jishuzhan.net/article/1701512574136225794/8cb44305e5fd40539397b5663e604a48.webp)
第三步,选择一个文件,比如 hero.model.ts
![](https://file.jishuzhan.net/article/1701512574136225794/c94d5070d480402d9e3590661a79c65b.webp)
第四步,查看 git 变化,路径会自动更改,代码也会移到目标文件
![](https://file.jishuzhan.net/article/1701512574136225794/04b69828ae5a484a8fa2943049d538ab.webp)
第五步,解决问题
- 查看目标文件里之前是不是
import
过要移动的代码,这里就是HeroBase
,如果有,把import
删掉。 这应该是个 bug,不过幸好影响范围不那么大,一次操作只有一个文件可能有问题。
![](https://file.jishuzhan.net/article/1701512574136225794/ebb9e64919054a4d8b756ff013565678.webp)
import
不会自动去重,比如
![](https://file.jishuzhan.net/article/1701512574136225794/f028da04cc3840609c8d41d1f9893b0d.webp)
如果把 bar
移到 b.ts
里,会出现 x
的重复 import
![](https://file.jishuzhan.net/article/1701512574136225794/e319f30edb58463c8731c0c68e09b13f.webp)
- 另一个似乎不影响的小问题,要移动的代码下面的注释也没了,移过去的地方也没有。不过如果注释下面还有代码,这个注释就不会动。
![](https://file.jishuzhan.net/article/1701512574136225794/f0322db0106e4306902d64ce239c9877.webp)
实话说,有了这个功能,移动代码,会省事很多,但目前使用还是建议测试下再提交代码!
其他的重构技巧
选中变量名或文件名, F2
重命名,也会自动同步修改所有引用!
![](https://file.jishuzhan.net/article/1701512574136225794/524750b3c0e145358d1f96f501726fb1.webp)
如果想先预览下,Shift+Enter
。
![](https://file.jishuzhan.net/article/1701512574136225794/2ceb5117cb7045fc85824188eaa13462.webp)
当然,这个是不是真的能替换所有引用,跟你的项目和框架也有些关系。 像 Angular template
上的变量,经常就无法自动更新。
重构里面的其他选项
选中一段代码,右击,点击 重构或 Refactor
![](https://file.jishuzhan.net/article/1701512574136225794/d5edcf90761c493f99efc672eb711fa5.webp)
你就能看到一堆重构技巧!
![](https://file.jishuzhan.net/article/1701512574136225794/b1a1d9763e9e418cb06a133628f3f765.webp)
尽情享受!