VSCode快捷键大幅提升前端重构效率：Ctrl+Shift+P提取函数自动推导参数；Ctrl+D逐个选中、Ctrl+Shift+L全文件替换变量；关闭formatOnSave避免干扰；F2语义重命名同步更新import路径（TS或JS Doc有效）。
前端重构不是靠手快，而是靠编辑器懂你——VSCode 的快捷键组合能直接决定你改一个组件是花 3 分钟还是 30 分钟。
Ctrl+Shift+P 里搜 extract 能直接提取函数
重构时最常卡在“这段逻辑该不该抽成函数”，别手动剪切粘贴。把光标停在想提取的代码块里（比如一段重复的表单校验逻辑），按 Ctrl+Shift+P，输入 extract，选 Extract to function in file 或 Extract to method in class。
- VSCode 会自动推导参数，你只需确认函数名（默认带下划线前缀，比如
validateForm_，建议手动改成语义化名字） - 如果原代码在箭头函数里，提取后可能丢失
this绑定，得手动加bind或改用普通函数 - Vue/React 中提取 JSX/TSX 片段时，
Extract to component选项只在 .vue/.tsx 文件里出现，普通 .js 不支持
Ctrl+D 和 Ctrl+Shift+L 的边界必须分清
批量改变量名或 props 时，选错方式会导致漏改或误改：
-
Ctrl+D是“逐个追加”：光标放在userName上按一次选中当前词，再按一次选中下一个同名词——适合要跳过某些上下文（比如只改 props 不改 state） -
Ctrl+Shift+L是“全文件匹配”：先选中一个userName，再按这组键，所有同名变量立刻高亮可编辑——但会连注释里的userName也选中，得提前Ctrl+F确认上下文 - 如果变量名带下划线（如
user_name），Ctrl+D默认按单词边界识别，可能只选中user，这时得先双击全选再操作
格式化前先关掉 editor.formatOnSave
重构过程中频繁保存会干扰节奏——尤其当你刚拆完函数、还没补全类型定义时，Prettier 可能强行把 const { a, b } = obj 拆成多行，导致 git diff 一团乱。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 临时关闭：按
Ctrl+,打开设置，搜formatOnSave，取消勾选；或者快捷键Ctrl+K Ctrl+S查看当前绑定，确认没被其他插件劫持 - 更稳妥的做法：在项目根目录加
.prettierrc，配"printWidth": 100，避免默认 80 列把一行解构硬折成三行 - 重构完成后再
Shift+Alt+F格式化全文件，比边写边格式化更可控
F2 重命名不只改变量，还能修 import 路径
把一个工具函数从 utils/helpers.js 移到 shared/utils.js 后，光改 import 语句太慢。直接在引用处按 F2，输入新函数名，VSCode 会自动：
- 更新所有调用位置（包括不同文件里的
import { xxx } from 'xxx'） - 修正 import 路径（前提是新路径在当前 workspace 内可解析，否则只改符号名）
- 但不会动
require()或动态import()，这类得手动 grep
重构最麻烦的从来不是写代码，而是让所有引用点同步更新——而 VSCode 的语义级重命名，只在 TypeScript 或启用了 JS Doc 类型标注的 JS 文件里可靠。纯 JS 项目里，F2 可能只改当前文件，别信它。
