如何在VSCode中批量重命名全文件内的React组件prop参数？

VSCode自带语义化重命名功能可以精准实现这个需求，不会误伤其他同名的无关变量，操作步骤如下：

• 打开组件定义的文件，把光标放在解构参数的oldPropName字符上
• 触发重命名操作：
  • Windows/Linux系统直接按F2
  • Mac系统按Fn + F2
  • 也可以右键点击变量，选择「重命名符号」选项
• 在弹出的输入框中输入新的参数名newPropName，按下回车即可
  如果需要先确认修改范围，可以点击输入框右侧的展开箭头，选择「预览重命名」，查看所有待修改的文件和对应行的内容，确认无误后再点击应用即可

适用场景拓展 #

这个方法不局限于React组件prop的重命名，所有JS/TS场景下的变量、函数名、类名、任意位置的解构参数都可以用该方式跨文件批量修改，因为VSCode是基于代码语义识别做的修改，而非纯文本匹配，准确率远高于全局搜索替换。如果是其他编程语言，安装对应语言的官方支持扩展后，也可以使用同样的语义重命名能力。

内容的提问来源于stack exchange，提问作者wunnle