VSCode插件需精准解决真实痛点，如Live Server不刷新要检查保存、文件引用和端口配置；ESLint与Prettier冲突应通过eslint-config-prettier禁用冲突规则并正确配置格式化；Vue/React路径导入问题需配合Volar或框架感知插件及正确tsconfig/jsconfig别名配置。
VSCode 插件不是“装得越多越好”，而是要解决你当前卡点——比如改完 HTML 要手动刷新、写 import 总是漏路径、CSS 写了 flex 却在 Safari 里不生效，这些才是真实痛点。
Live Server 启动后页面不自动刷新？检查这三处
常见现象：点击状态栏 Go Live 后浏览器打开了，但改了 index.html 或 script.js，页面没反应。
- 确认文件保存了——
editor.formatOnSave开启时，有时格式化会延迟触发保存，建议关掉自动保存或按Ctrl+S显式保存 - 检查是否修改的是被引用的文件，而不是入口 HTML：Live Server 默认只监听当前打开的 HTML 及其直接依赖（如内联
<script>），不会监听src/utils.js这类模块文件，除非你用构建工具（如 Vite）接管了热更新 - 端口被占用或配置冲突：如果项目根目录有
.vscode/settings.json，且设置了"liveServer.settings.port": 0（随机端口），但系统临时端口池已满，可能 fallback 到失败状态，可临时固定为8080排查
ESLint + Prettier 冲突报错？别硬配，用现成桥接
典型错误信息：Definition for rule 'prettier/prettier' was not found 或保存后代码越修越乱。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 根本原因不是规则写错了，而是 ESLint 和 Prettier 各自运行、互相覆盖。Prettier 负责格式，ESLint 负责逻辑检查，二者不该混用同一套规则
- 正确做法：安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上它，顺序很重要——必须放在最后，才能禁用所有与 Prettier 冲突的 ESLint 格式规则 - VS Code 设置里，确保
editor.defaultFormatter设为esbenp.prettier-vscode，且editor.formatOnSave为true；同时关闭eslint.autoFixOnSave（新版已弃用），改用"eslint.codeAction.showDocumentation"配合保存时自动修复
Vue/React 组件路径太深，import 总写错？靠 Auto Import 不够
现象：输入 <MyButton>，插件自动补全了 import { MyButton } from '@/components/ui/MyButton.vue'，但实际路径是 @/ui/atoms/Button.vue，补全失败。
立即学习“前端免费学习笔记（深入）”；
-
Auto Import插件依赖 TypeScript 的类型推导和tsconfig.json中的baseUrl+paths配置，如果项目没配路径别名，它只能猜相对路径，准确率骤降 - 真正管用的是配合
Volar（Vue）或ES7+ React/Redux/React-Native snippets（React）这类框架感知型插件，它们能读取vite.config.ts或jsconfig.json中的别名映射 - 手动验证路径是否生效：在任意
import语句里按Ctrl+Click，能跳转到目标文件才算配置成功；跳不到，就说明 VS Code 没识别到别名，需要检查jsconfig.json是否存在、compilerOptions.paths是否写对、以及有没有被node_modules下的同名配置覆盖
最常被忽略的一点：插件之间存在隐式依赖关系。比如 Auto Import 在 Vue 项目里想正常工作，必须先装 Volar；ESLint 报错不提示，大概率是 typescript-eslint 版本和你的 TS 版本不匹配。不要只盯着单个插件调，得看它站在哪条技术栈链条上。
