ESLint与Prettier冲突的根本原因是规则重叠，应通过安装eslint-config-prettier禁用ESLint中所有格式类规则，并在VSCode中明确指定Prettier为默认格式化器，同时确保Volar替代已停更的Vetur以避免类型系统紊乱。

ESLint 和 Prettier 必须共存，但默认会打架——关键不在装不装，而在怎么配。

为什么 ESLint + Prettier 一起用反而报错？

两者职责不同：ESLint 检查「逻辑和规范」，Prettier 只管「格式美观」。但部分规则重叠（比如单引号、分号），导致保存时反复修改、光标跳动、甚至格式化失效。

• 必须安装 eslint-config-prettier，它不是插件，是 npm 包，用于关闭 ESLint 中所有和格式相关的规则
• settings.json 里要明确指定 "editor.defaultFormatter": "esbenp.prettier-vscode"，否则 ESLint 可能抢着格式化
• Vue3 项目额外加 "prettier.vueIndentScriptAndStyle": true，不然 <script> 里的缩进会错乱

Volar 为什么不能和 Vetur 共存？

Volar 是 Vue3 官方推荐的替代方案，Vetur 已停止维护。两者同时启用会导致类型提示错乱、ref 推导失败、defineProps 类型丢失。

• 卸载 Vetur 后重启 VSCode，否则旧缓存仍生效
• 确保工作区根目录有 tsconfig.json 或 jsconfig.json，否则 Volar 的类型支持基本失效
• 开启 Volar 的 hybridMode（需在 .vscode/settings.json 中设 "volar.hybridMode": true），才能正确处理 <script setup> + <template> 的双向类型联动

Path Intellisense 路径补全为啥找不到 @/components？

它本身不读 webpack 或 vite.config.ts 的 alias，只认 jsconfig.json 或 tsconfig.json 的 "paths" 配置。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 必须在项目根目录创建 jsconfig.json（TS 项目用 tsconfig.json），内容至少包含：

  { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }

• 改完配置后，VSCode 右下角会提示「TypeScript 正在重新加载项目」，等提示消失再试补全
• 如果用了 src/pages 这类深层路径，paths 必须显式写全，"@/pages/*": ["src/pages/*"]，通配符不会自动递归

Auto Rename Tag 在 JSX 里失灵怎么办？

默认只启用 HTML/XML 模式，React 的 JSX 属于 javascriptreact 或 typescriptreact 语言模式，需手动开启。

立即学习“前端免费学习笔记（深入）”；

• 打开 settings.json，加这一行："auto-rename-tag.activationOnLanguage": ["html", "xml", "javascriptreact", "typescriptreact"]
• 别用旧版 Auto Close Tag，它和 Auto Rename Tag 冲突，关掉前者
• 遇到自闭合标签如 <Input />，插件无法重命名——这是设计限制，不是 bug

真正卡住人的，从来不是插件装不装，而是 jsconfig.json 没配、eslint-config-prettier 没装、或者 Volar 和 Vetur 在后台偷偷打架。这些地方不动，装再多插件也只是表面热闹。