ESLint + Prettier 自动修复失效的根本原因是规则冲突或 VSCode 未设 Prettier 为默认格式化器，需配置 "editor.defaultFormatter": "esbenp.prettier-vscode"、关闭 TS 自带校验、安装并启用 eslint-config-prettier、Vue3 项目添加 prettier.vueIndentScriptAndStyle: true。
ESLint + Prettier 自动修复失效怎么办
常见现象是保存后代码没格式化，或者 eslint --fix 不生效。根本原因通常是两者规则冲突，或 VSCode 没把 Prettier 设为默认格式化工具。
- 必须在
settings.json中明确指定："editor.defaultFormatter": "esbenp.prettier-vscode" - 关闭 TypeScript 自带校验：
"javascript.validate.enable": false和"typescript.validate.enable": false，否则会和 ESLint 报错打架 - 安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上它，专门用来禁用所有和 Prettier 冲突的规则 - Vue3 项目要额外加
"prettier.vueIndentScriptAndStyle": true，不然<script>里的缩进会错乱
Volar 在 Vue3 单文件组件里不提示 props 怎么办
不是插件没装，而是 VSCode 默认没启用 Vue 语言服务的“混合模式”（hybrid mode），导致模板和脚本部分解析割裂。
- 必须在项目级
.vscode/settings.json中写："vue.experimental.enableVolarForVue2": false（确保不误启 Vetur） - 启用 hybrid mode：
"volar.takeOverMode": true或配合"volar.hybridMode": true（取决于 Volar 版本） - 如果用了
defineProps泛型写法，确保tsconfig.json中有"compilerOptions": { "skipLibCheck": true }，否则类型推导卡住 - 重启 TS Server：按
Ctrl+Shift+P→ 输入Restart TS server，不能只 reload window
路径补全（Path Intellisense）找不到 node_modules 里的包
默认只扫描当前工作区根目录下的 node_modules，但 monorepo 或 lerna 项目中依赖常在上级目录，或用了 pnpm 的硬链接结构。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
settings.json中加配置："path-intellisense.mappings": { "~": "${workspaceFolder}/src", "@": "${workspaceFolder}/src" } - 对 pnpm 项目，需显式告诉插件去哪找模块：
"path-intellisense.includePackages": true，并确保pnpm store path被正确识别（必要时手动设"path-intellisense.packageManager": "pnpm"） - 若用别名（如
@/components），Webpack/Vite 别名配置必须和插件映射一致，否则补全能出、运行时报错
Live Server 端口被占用或无法局域网访问
默认端口 5500 经常冲突，且新版本 Live Server 默认禁用外部访问，手机调试连不上。
立即学习“前端免费学习笔记（深入）”；
- 在
.vscode/settings.json中配："liveServer.settings.port": 3000，避开常用端口 - 开启局域网访问：
"liveServer.settings.AdvanceCustomBrowserCmdLine": ["--host=0.0.0.0"]（Chrome）或直接改"liveServer.settings.CustomBrowser": "chrome" - 更稳妥的做法是关掉 Live Server，改用 Vite 的
vite preview或 Webpack Dev Server，它们原生支持 host/port 配置且更贴近真实环境
.vue 文件的诊断，得靠 "volar.takeOverMode" 显式声明；而 ESLint 和 Prettier 的执行时机，也取决于 editor.formatOnSave 和 editor.codeActionsOnSave 的组合逻辑——差一个配置项，就可能保存后代码变丑或者报错不消失。 
