ESLint与Prettier协同失效的根本原因是规则重叠未清理干净，须在.eslintrc.js的extends末尾添加'prettier'，并配合eslint-config-prettier关闭冲突规则，同时VSCode需指定esbenp.prettier-vscode为默认formatter且禁用其他格式化插件。
前端项目开箱即用的开发体验，不靠玄学配置，靠这 5 类插件精准覆盖核心痛点。
ESLint + Prettier 协同失效怎么办
常见错误现象是保存后代码没格式化，或 eslint --fix 报错“conflict with prettier”。根本原因不是插件没装，而是规则重叠没关干净。
- 必须在
.eslintrc.js的extends数组末尾加上'prettier'（注意不是prettier/react这类子集） -
prettier插件本身不参与 lint 检查，只负责格式化；eslint-config-prettier才是关闭 ESLint 中与 Prettier 冲突的规则的关键 - VSCode 设置里要明确指定默认 formatter 为
esbenp.prettier-vscode，且禁用其他插件的自动格式化（比如beautify） - 如果用 TypeScript，
plugin:@typescript-eslint/recommended必须放在prettier前面，否则类型相关规则会被误关
Vue/React 文件里路径跳转失灵
写 import { api } from '@/api/user'，Ctrl+点击却打不开文件——这不是插件问题，是 VSCode 没法识别 @ 别名。Path Intellisense 只补全，不跳转；真正解决跳转得靠项目级配置。
- 确保项目根目录有
jsconfig.json（Vue CLI 项目）或tsconfig.json（Vite + TS），且包含"baseUrl"和"paths"字段 -
"paths": { "@/*": ["src/*"] }中的src/*必须是相对于baseUrl的真实路径，不能写成./src/* - 修改配置后必须重启 VSCode，仅重载窗口不够；部分旧项目需删掉
node_modules/.vscode缓存目录 - Vue 项目若用
<script setup></script>，还需确认vue插件已启用，否则defineProps等 API 的类型推导会断掉跳转链
调试时断点不命中、变量显示 undefined
尤其在 Vite 或 Webpack 构建后，Chrome DevTools 显示的是打包后的代码，VSCode 里设的断点根本没生效。Debugger for Chrome 插件只是桥梁，关键在 sourcemap 映射是否对齐。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
launch.json中的webRoot必须指向开发服务器启动时的真实根路径（如"${workspaceFolder}"），不是构建输出目录 - Vite 项目需确认
vite.config.ts中build.sourcemap设为true，且resolve.alias与jsconfig.json一致，否则 sourcemap 里路径和实际文件路径对不上 - 如果用
npm run dev启动，url字段应填http://localhost:5173这类实际地址，不能填index.html相对路径 - React 18 的并发渲染可能导致断点跳过某些 render 阶段，此时建议在
useEffect或事件回调里设断点，而非组件顶层
别名路径补全不提示 @/components/xxx
Path Intellisense 默认只补全相对路径（../、./），对 @/ 这类 webpack alias 需手动激活支持。
- 打开 VSCode 设置，搜索
path-intellisense.mappings，点击“在 settings.json 中编辑” - 添加映射：
"@": "${workspaceFolder}/src"—— 注意这里用的是${workspaceFolder}，不是硬编码路径 - 如果项目有多个别名（如
#utils），每个都要单独加一条映射，不能合并写成{"@": "...", "#utils": "..."}（JSON 不支持注释，但值必须是字符串） - 补全触发时机是输入
@/后按Ctrl+Space，不是自动弹出；若仍无响应，检查当前文件是否被识别为 JavaScript/TypeScript（右下角语言模式是否为JavaScript React）
插件本身不会自动理解你的项目结构，所有“智能”都依赖配置项与真实路径的一致性。最常被忽略的是：改了 jsconfig.json 忘重启编辑器，或在 launch.json 里写了死地址却没随服务端口变化同步更新。
