Prettier只负责代码格式化（“怎么写好看”），ESLint则检查语法错误和潜在问题（“有没有写错”），二者职责不同、必须协同配置，否则会出现规则冲突或校验缺失。
为什么装了 Prettier 还要配 ESLint？
因为 Prettier 只管“怎么写好看”，ESLint 才管“有没有写错”。两者职责完全不同，强行只用一个，等于让校对员兼当语法老师——校对员能指出“逗号后面少空格”，但不会告诉你“if 后面漏了括号会报 Unexpected token”。
- 常见错误现象：保存后代码自动格式化了，但
console.log还是没被拦截、undefined被赋值给对象属性也没警告 - 必须协同配置：在
settings.json中设"editor.defaultformatter": "esbenp.prettier-vscode"，同时启用"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 关键兼容项：装
eslint-config-prettier插件，否则ESLint的semi规则和Prettier的semi配置会打架，导致保存时反复格式化又撤销
Vue 项目里 Volar 和 Vetur 能共存吗？
不能。Volar 是 Vue 3 官方推荐的语言服务器，Vetur 已停止维护，且两者都监听 .vue 文件的 onDidOpenTextDocument 事件——装两个，等于让两个医生同时给同一个病人开药方，轻则类型提示失效，重则编辑器直接卡死在 Starting language server...。
- 使用场景：Vue 3 + Composition API + TypeScript 项目，必须用
Volar；Vue 2 项目才考虑Vetur（但建议升级） - 容易踩的坑：
Volar默认不启用模板类型检查，需手动打开volar.enableExperimentalFeatures并设为true，否则defineProps的泛型推导无效 - 性能影响：Volar 启用
Take Over Mode后，会接管所有.vue文件，此时禁用Vetur不仅必要，而且能降低内存占用约 120MB（实测 16GB 内存机器）
Live Server 启动后页面不刷新？
不是插件坏了，大概率是前端构建工具（如 Vite、Webpack）和 Live Server 在抢端口或监听路径。Live Server 是静态文件服务器，它只响应 GET /xxx.js 这类原始请求；而 Vite 开发服务器返回的是经 HMR 处理后的动态模块，两者根本不在同一套机制里。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 典型表现：修改
index.html能刷新，改src/App.vue没反应 - 正确做法：Vue/React 项目直接用框架自带开发服务器（
npm run dev），Live Server 只用于纯 HTML/CSS/JS 原生项目 - 配置陷阱：如果硬要用 Live Server 跑构建产物，记得把
outDir（如dist）设为根目录，并关闭框架的 dev server，否则浏览器会收到两个不同来源的响应，控制台报net::ERR_CONNECTION_REFUSED
Path Intellisense 提示路径却跳转失败？
它只补全字符串，不验证路径是否存在。你敲完 import Header from '@/components/Header.vue'，它确实弹出了提示，但 @ 别名没配好，VSCode 就找不到这个模块——错误发生在运行时，不是编辑器问题。
立即学习“前端免费学习笔记（深入）”；
- 常见原因：
jsconfig.json或tsconfig.json里没声明baseUrl和paths，或者 Webpack/Vite 的resolve.alias和 TS 配置不一致 - 验证方法：按住
Ctrl（macOS 是Cmd）点路径，能跳转才算真正生效；如果只是高亮，说明只是字符串匹配 - 兼容性注意：Volar 对
paths的支持依赖types字段是否指向正确的node_modules，若项目用了 pnpm，需确认pnpm store路径是否被 TS 正确识别
Volar 的类型提示依赖 ESLint 的解析结果，而 ESLint 又可能因 Prettier 格式化中途中断导致规则失效——这些链路不是装上就完事，得盯着状态栏右下角那个小图标，看它是不是稳稳亮着绿色。 
