ESLint与Prettier协同工作需启用eslint-config-prettier关闭ESLint格式规则，仅保留逻辑检查；配置中extends必须末尾加入'prettier'，TS项目还需eslint-config-prettier/@typescript-eslint；VS Code需指定Prettier为默认formatter并正确设置语言模式与路径映射。
前端开发中，真正能减少重复劳动、提前暴露问题、让协作不靠嘴靠配置的，不是“装得多”，而是几个关键插件配得准、开得稳、用得熟。
ESLint + Prettier 冲突时 eslint-config-prettier 必须启用
常见错误现象是：保存后代码格式被 Prettier 调整了，但 ESLint 仍报“missing semicolon”或“quotes not consistent”这类格式类警告。这不是规则没生效，而是两者在“格式校验”上打架。
-
eslint-config-prettier的作用是关掉 ESLint 中所有与格式相关的规则（比如semi、quotes），只保留逻辑和安全类检查（比如no-unused-vars、no-undef） - 必须在
.eslintrc.js的extends数组末尾加入'prettier'，顺序不能颠倒 - 如果项目用 TypeScript，还需额外加
eslint-config-prettier/@typescript-eslint，否则interface或泛型写法可能被误标 - VS Code 设置里要明确指定默认 formatter 是
esbenp.prettier-vscode，否则右键“Format Document”可能调用错工具
Auto Rename Tag 在 JSX/TSX 中默认不生效
该插件默认只监听 .html 和 .vue 文件，遇到 React 项目里的 .tsx 文件，改一个 <div> 标签，闭合标签不会同步更新——不是插件坏了，是语言模式没识别。
- 打开 VS Code 设置（
Cmd+,），搜索files.associations - 添加映射：
"*.tsx": "javascriptreact"（或"*.jsx": "javascriptreact"） - 重启窗口或重载窗口（
Cmd+Shift+P→ “Developer: Reload Window”） - 确认右下角语言模式显示为
Javascript React，而非TypeScript，否则插件不触发
Path Intellisense 对 @/ 别名路径补全失败
项目用了 jsconfig.json 或 tsconfig.json 配置了 "@/*": ["src/*"]，但在 import 语句里输入 @/ 后没提示，不是插件不支持，是它没读到配置。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
Path Intellisense默认只认webpack.config.js或vue.config.js中的resolve.alias，不自动读取jsconfig.json - 需手动在 VS Code 设置中开启
path-intellisense.mappings，填入：{"@": "${workspaceFolder}/src"} - 若项目用 Vite，且 alias 来自
vite.config.ts，则必须复制 alias 配置到path-intellisense.mappings，否则补全无效 - 注意路径分隔符：Windows 用户写
"\src"，macOS/Linux 写"/src"，混用会导致补全消失
Live Server 启动后页面空白或 404
右键 HTML 文件点 “Open with Live Server”，浏览器打开却是空白页或 Network 显示 GET / 404，大概率是入口文件没被识别，不是服务没起来。
-
Live Server默认只把当前打开的 HTML 文件当作根入口；如果项目结构是dist/index.html，但你打开的是src/index.html，它就只会 servesrc/目录 - 解决方法：右键点击项目根目录下的
index.html（确保它是真正部署时的入口），再启动 - 如果要用自定义端口或根路径，需在设置里修改
liveServer.settings.donotShowInfoMsg关闭提示后，手动编辑liveServer.settings.CustomBrowser或通过liveServer.settings.root指定路径 - Vue/React 项目别依赖它做开发服务器——它不处理路由 history fallback，
/user/profile这种路径刷新直接 404；仅适用于纯静态页或 demo 验证
插件不是越多越好，而是每个都得知道它在哪生效、为什么失效、怎么让它听话。尤其当团队共用一套配置时，路径映射、语言模式、规则优先级这些细节，漏掉一个就卡住三个人。
