vscode全局替换必须限定文件范围，否则易误伤；应在“包含文件”框中输入/.vue或src//.ts等精确路径，并配合正则捕获组（如$1）实现安全重构，替换后须通过git差异视图逐行审查。
VSCode 全局替换在前端项目里不是“能用”，而是“必须用对”——否则一次 全部替换 就可能让按钮样式错位、组件 props 传参失效、甚至 TypeScript 类型校验全红。
如何限定只替换 .vue 或 .ts 文件而不误伤其他类型
关键不在“找什么”，而在“在哪找”。VSCode 默认的 Ctrl+Shift+H（macOS 是 Cmd+Shift+H）打开的是“在文件中替换”面板，但如果你没在“包含文件”框里填明确范围，它会默认扫描整个工作区（包括 node_modules、dist、.git 等），而这些目录通常已被 search.exclude 隐藏——结果就是：你明明想改 src/components 下的 .vue，却搜不到任何结果。
- 正确做法是在“包含文件”框中输入
**/*.vue（所有层级的 Vue 文件）或src/**/*.ts（仅 src 下的 TS 文件） - 如果项目用了多根工作区（
.code-workspace），要确认每个文件夹都已加载，右下角不能显示No folder opened - 排除干扰项：在“排除文件”框里加
**/tests/**, **/__mocks__/**，避免测试文件被意外修改
正则替换时捕获组 $1/$2 的实际写法和常见翻车点
前端重构高频场景：把 v-bind:prop="value" 改成 :prop="value"，或把 class="old-comp-button" 批量转为 class="new-comp-button"。这时靠字符串替换会漏掉动态绑定、拼接类名等变体，必须用正则 + 捕获组。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 搜索内容写成：
class="old-comp-(\w+)"，替换内容写成：class="new-comp-$1"—— 注意$1前后不要加空格或引号，否则会原样输出 - 想匹配换行符？
\n在正则模式下是字面量换行，不是反斜杠+n；若要匹配真实换行，直接按回车键输入，或用[\r\n] - Vue 模板中属性值含双引号又带变量？例如
:class="['btn', `old-comp-${type}`]"，此时正则需启用.*模式并用非贪婪匹配：:class="\['btn',\s*`old-comp-(\w+)`\]"
替换后 UI 异常或类型报错，怎么快速定位哪一行被改错了
全局替换完发现按钮没了边框、TS 报 Property 'xxx' does not exist on type 'Y'，别急着撤销。VSCode 最可靠的审查路径是 Git 差异视图，不是靠眼睛扫代码。
- 立刻按
Ctrl+Shift+G（macOSCmd+Shift+G）打开源代码管理面板，所有被修改的文件会列出来 - 逐个点击文件，在差异视图中看红色删除行（原内容）和绿色新增行（新内容），重点检查：CSS 类名是否拼写一致、
defineProps的 key 是否大小写匹配、import路径是否因相对路径变更而断开 - 如果改动涉及样式层叠，不要只看 CSS 文件，还要打开浏览器开发者工具，检查 computed styles 中该元素最终生效的
class列表 —— 可能是旧类名还在 HTML 中残留，而新类名没定义
真正容易被忽略的，是替换前后语义一致性：比如把 user_id 全替成 userId，但后端 API 返回字段仍是 user_id，前端解构就会失败；或者正则没加 ^ 和 $ 锚点，把 myButton 替成 myButtonNew 的同时，也把 myButtonGroup 错误改成了 myButtonNewGroup。每次替换前花 10 秒看一眼预览列表里的上下文，比事后 debug 两小时更省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
