真正省时的VSCode插件是Live Server、Prettier+ESLint、Path Intellisense、Volar/TS React Plugin——分别解决自动刷新、格式规范、别名跳转、类型感知四大高频堵点。
VSCode 里真正能省下每天 30 分钟以上调试/补全/预览时间的插件，不是装得越多越好，而是选对那几个关键角色——它们解决的是「写代码时卡在哪」「改完不敢点保存」「跳转不到变量定义」这类高频堵点。
Live Server：保存即刷新，别再手动 F5
你改完一行 html 或 css，还得切到浏览器按 F5？这步完全可以删掉。Live Server 启动后会监听文件变化，自动触发浏览器重载，且支持局域网访问（比如用手机扫二维码预览）。
常见错误现象：Go Live 按钮不出现、点击无反应、修改后不刷新
- 确保当前打开的是一个
.html文件（不是空文件夹或未保存的临时文件） - 检查端口冲突：默认
5500，可在设置中搜liveServer.settings.port改为0（随机）或其它值 - 若项目用了构建工具（如 Vite、Webpack），Live Server 不适用——它只适合静态 HTML/CSS/JS 原生开发或快速原型验证
Prettier + ESLint：格式和规范，一次配好不再吵
团队里总有人纠结「要不要分号」「大括号换行吗」，其实这不是风格问题，是没配好 Prettier 和 ESLint 的协同规则。Prettier 负责统一格式，ESLint 负责逻辑检查，两者必须解耦，否则保存时互相打架。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：eslint-config-prettier 忘了装、.eslintrc.js 里没关掉格式类规则、VSCode 设置里 editor.defaultFormatter 没指向 Prettier
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安装插件：
esbenp.prettier-vscode和dbaeumer.vscode-eslint - 在项目根目录加
.prettierrc（哪怕只写{"semi": false, "singleQuote": true}） - 在
.eslintrc.js的extends中加入'prettier'，并确保它在数组最后 - VSCode 设置里启用
editor.formatOnSave，但关闭editor.codeActionsOnSave.organizeImports（交给 ESLint 的source.fixAll.eslint更稳）
Path Intellisense：@/components/ 这种别名路径，按 Ctrl+鼠标能跳转
你写 import Header from '@/components/Header.vue'，结果 Ctrl+点击 没反应？不是路径错了，是 VSCode 不认识 @ 是啥。Path Intellisense 本身不解决跳转，但它配合 jsconfig.json 或 tsconfig.json 的 paths 配置，才能让别名可识别、可补全、可跳转。
使用场景：Vue/React 项目用 @ 指向 src、# 指向 types、自定义 ~lib 等
- 先在项目根目录确认有
jsconfig.json（JS 项目）或tsconfig.json（TS 项目） - 里面必须包含
"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}} - Path Intellisense 插件需开启
path-intellisense.mappings设置，填入同上的{"@": "./src"}（注意这里是对象，不是数组） - 改完配置后执行命令面板
Developer: Reload Window，否则不生效
Volar（Vue）或 TypeScript React Plugin（React）：不是语法高亮，是类型感知
如果你在 Vue 的 <script setup> 里写 props.xxx，没有自动补全；或者在 React 的 TSX 文件里，useState<string>() 报红但实际没问题——说明语言服务没接上。Volar 和 TypeScript React Plugin 不是“锦上添花”，是让 VSCode 真正理解你写的框架代码。
性能影响：Volar 启用后，大型 Vue 项目首次打开可能多等 2–3 秒加载类型服务；但之后的跳转、悬停、重命名才真正可靠
- Vue 项目务必禁用旧插件
vetur（二者冲突） - Volar 需在工作区设置中启用
volar.enable，并确认volar.autoEnable为true - React + TS 项目推荐装
ms-vscode.vscode-typescript-next或确保 TS 版本 ≥ 5.0，否则useEffect依赖推导不准 - 如果
Ctrl+点击组件名仍跳不到定义，检查tsconfig.json是否漏了"include": ["src/**/*"]
最常被忽略的一点：插件不是装完就一劳永逸。比如 Prettier 升级到 3.x 后默认禁用 semi，而你项目还依赖旧版规则，就会突然格式错乱；又比如 Volar 更新后要求重启语言服务器（右下角通知栏点「Restart Server」）。保持插件更新意识，比盲目堆数量重要得多。
