装插件应精不宜多，新手宜每次装1–2个并重启验证；需按项目技术栈选配（如Vue 3用Volar而非Vetur），禁用不用插件避免冲突，并注意Format on Save等设置需配合对应插件配置才生效。

装插件不是越多越好，而是挑真正能解决你当前问题的那几个。新手起步阶段，装满 20 个插件反而会拖慢启动速度、干扰编辑器行为，甚至引发插件冲突。

怎么装插件不踩坑

VS Code 的插件机制是按需加载，但部分插件会在启动时主动扫描项目结构（比如 ESLint、Vetur），如果项目没配好或依赖缺失，就会卡住「Loading extensions…」或报错 Extension activation failed。

• 安装前先确认自己当前项目的技术栈：Vue？React？TypeScript？有没有用 Vite 或 Webpack？不同框架对插件兼容性要求差异很大
• 不要一次性批量安装；每次装 1–2 个，重启后验证功能是否正常再继续
• 禁用不用的插件：右键插件 → Disable (Workspace) 比直接卸载更安全，避免误删配置
• 留意插件最后更新时间——比如 Vetur 已停止维护，Vue 3 项目应改用 Volar，否则会出现 Cannot find module 'vue/compiler-sfc' 类错误

哪些插件必须开「Format on Save」

这个设置只对支持格式化的插件生效，不是所有插件都认它。开了却没效果，大概率是因为没设对默认 formatter，或者插件根本没注册语言支持。

• Prettier：必须配合 "editor.defaultFormatter": "esbenp.prettier-vscode" 才能响应 formatOnSave
• ESLint：要加 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }，否则保存时不会自动修复
• Volar（Vue）和 ESLint 共存时，需在 settings.json 中明确指定 "html.format.enable": false，否则 .vue 文件里的 template 区域会被 Prettier 和 Volar 双重格式化，导致缩进错乱

别名路径跳转为什么点不开

插件叫 Path Intellisense 或 Alias Navigator，但光装上不行，得告诉它你项目里 @/ 到底指向哪。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

• Webpack 项目看 webpack.config.js 里的 resolve.alias；Vite 项目查 vite.config.ts 中的 resolve.alias
• 插件配置项一般叫 path-intellisense.mappings 或 alias-navigator.aliases，填的是对象，不是字符串，例如：{"@": "./src"}
• 如果用了 TypeScript，还要确保 tsconfig.json 的 compilerOptions.baseUrl 和 paths 与插件映射一致，否则 Ctrl+Click 会跳到声明文件而非源码

Live Server 启动失败常见原因

点「Go Live」没反应，或浏览器打开空白页，90% 是因为没在正确上下文中启动。

• 必须打开整个项目文件夹（File → Open Folder），不能只打开单个 index.html 文件——否则插件找不到根路径，无法起服务
• 检查端口是否被占用：默认 5500，可在设置里改 liveServer.settings.port
• 如果项目用了路由（如 Vue Router history 模式），需开启 liveServer.settings.CustomBrowser 并设为 "chrome"，否则刷新页面会 404
• 某些代理工具（如 Charles、Fiddler）可能劫持 localhost 请求，临时关闭它们再试

插件本身不复杂，难的是理解它和你项目配置之间的耦合点。一个插件失效，往往不是插件坏了，而是它依赖的某个路径、类型定义或构建配置没对上。盯着报错信息里的文件路径和模块名，比盲目重装更有效。