Prettier和ESLint报错是因为规则职责重叠：ESLint默认启用格式类规则（如semi、quotes），与Prettier的样式格式化冲突；需安装eslint-config-prettier并置于extends末尾禁用冲突规则，同时设Prettier为VSCode默认格式化器。

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

不是插件冲突，是规则打架。Prettier 负责格式重排（比如把 const a=1 变成 const a = 1），ESLint 负责逻辑校验（比如报错 no-unused-vars）。但 ESLint 默认自带一套格式规则（如 space-in-parens），和 Prettier 的输出直接抵触。

• 必须装 eslint-config-prettier，并在 .eslintrc.js 的 extends 里把它放在最后，它会禁用所有和 Prettier 冲突的 ESLint 格式规则
• settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，否则保存时可能调用错 formatter
• 别同时开启 editor.formatOnSave 和 eslint.enable 的 auto-fix（eslint.codeActionsOnSave），二者都触发时顺序不可控，容易漏格式或重复改

Auto Rename Tag 在 Vue/JSX 里失效？

默认只监听 HTML，Vue 单文件组件和 JSX 不在激活列表里，所以改 <div> 没反应，但改 <MyComponent> 也不动——根本没启用。

• 手动加配置："auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact", "typescriptreact"]
• javascriptreact 对应 .jsx 文件，typescriptreact 对应 .tsx，别写成 jsx 或 react，VSCode 不认
• 如果用了自定义组件名（比如 <FooBarBaz>），确保标签名符合 PascalCase 规范，否则插件识别不了闭合对

Path Intellisense 补全 @/src 路径失败？

插件本身不解析 alias，它只读 jsconfig.json 或 tsconfig.json 里的 compilerOptions.paths。没配路径映射，它就当普通字符串补全，@/ 直接被忽略。

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/*"] } }
• VSCode 需要重启或执行 Developer: Restart Language Server 命令，否则新配置不生效
• 补全触发快捷键是 Ctrl+Space，不是 Tab；如果设置了其他补全插件（如 TypeScript 自带），可能拦截了该快捷键

保存时格式化慢、卡顿超过 1 秒？

问题不在 Prettier 本身，而在它被调用的上下文：大文件 + 全量扫描 + 多插件抢夺控制权。

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

• 关掉无关 formatter：检查 settings.json 是否有多个 editor.defaultFormatter，只留 Prettier 一个
• 限制作用范围："editor.formatOnSave": true 改成 "editor.formatOnSave": "modified"，只格式化改动行，而非整文件
• 排除大文件：.prettierignore 加上 **/*.min.js、dist/、node_modules/
• 禁用实时预览类插件（如 Live Server）的自动刷新，它们常在保存后立刻 reload，干扰 formatter 执行节奏

真正拖慢前端编码体验的，往往不是少装了哪个插件，而是几个插件在同一个事件点（比如 onSave）上反复争夺执行权——光看功能描述看不出这点，得看它们实际监听了哪些 VSCode 生命周期钩子。