Prettier 与 ESLint 冲突需禁用 ESLint 格式规则：通过 extends: ["eslint:recommended", "prettier"] 且安装 eslint-config-prettier 插件，使 Prettier 专管格式、ESLint 专管逻辑。
前端开发者光装插件没用，关键得知道哪些配置能真正改变开发节奏——比如 Prettier 不配 eslint-config-prettier 会和 ESLint 冲突，Live Server 默认端口被占就起不来，Path Intellisense 遇到 @/ 别名不生效多半是 jsconfig.json 没写对。
为什么 Prettier 和 ESLint 一起用反而报错？
两者都管格式，但规则重叠时会打架。ESLint 的 quotes、semi 等规则和 Prettier 的输出冲突，保存时反复修正，编辑器卡顿甚至格式错乱。
- 必须在 ESLint 配置里显式禁用格式类规则：
extends: ["eslint:recommended", "prettier"]，且prettier要放在最后 - 安装
eslint-config-prettier插件，它专门负责“关掉 ESLint 里所有和 Prettier 冲突的规则” -
.prettierrc里只留风格参数，比如"semi": false、"singleQuote": true，别写"no-console"这类逻辑规则 - VSCode 设置里确认
"editor.defaultFormatter"是esbenp.prettier-vscode，且"editor.formatOnSave"开启
Live Server 启动失败常见原因
点“Go Live”没反应，或者浏览器打开空白页，通常不是插件坏了，而是环境没对齐。
- 检查当前文件是否为
index.html或项目根目录下有该文件；Live Server 默认只认index.html作为入口 - 端口被占用时不会报错，只会静默失败。手动指定端口：右键 → “Open with Live Server” → 在命令面板输入
Live Server: Change Port - 若项目用了 Webpack/Vite，别依赖 Live Server 做开发服务器，它不处理模块打包，只适合纯静态页或快速原型
- 局域网访问需改配置：
"liveServer.settings.AdvanceCustomBrowserCmdLine": ["--host=0.0.0.0"]，否则手机连不上
Path Intellisense 对 @/ 别名没提示？
写了 import Header from "@/components/Header.vue"，但按 Ctrl+Space 不弹路径，问题几乎全出在路径映射没被识别。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
jsconfig.json（JS 项目）或tsconfig.json（TS 项目）必须存在，且包含"compilerOptions.baseUrl"和"paths" - 示例配置必须严格匹配：
"@/*": ["src/*"]，注意斜杠方向和通配符位置，"@/components"对应的是src/components - VSCode 有时缓存旧配置，改完配置后执行命令面板里的
Developer: Reload Window - 如果用 Vite，还需确保
vite.config.ts里也配了resolve.alias，否则运行时可能报错，但补全仍可工作
Auto Rename Tag 在 JSX 里失效？
React 项目中修改 <div> 不自动同步 </div>，或 <MyComponent> 改名后闭合标签没变，基本是语言模式或插件开关没开对。
- 确认当前文件后缀是
.jsx或.tsx，且右下角状态栏显示语言模式为JavaScript React（不是JavaScript） - 插件设置里检查
"auto-rename-tag.activationOnLanguage"是否包含"jsx"和"typescriptreact" - 如果用了自定义组件（如
<MyButton size="large">），插件默认只处理 HTML 标准标签；需配合Volar（Vue）或ESLint + import/no-unused-vars等工具做更深层校验 - 嵌套过深时（比如 8 层 div），插件可能因性能限制跳过，此时建议拆分组件，而不是强依赖自动重命名
插件本身只是工具，真正卡住效率的往往是配置细节和组合逻辑——比如 ESLint 规则顺序、jsconfig.json 的路径写法、甚至 VSCode 窗口是否重载过。这些地方不验证，装再多插件也只是摆设。
