必须安装eslint-config-prettier并在.eslintrc.js的extends末尾添加'prettier'，vscode中设editor.defaultformatter为esbenp.prettier-vscode并关闭eslint.autofixonsave，使eslint只检逻辑错误、prettier专管格式。

前端项目里，VSCode 不装插件等于裸写——格式混乱、跳转失效、路径写错、语法隐患全靠肉眼发现。真正能落地提效的插件，不是数量多，而是每装一个都解决一个具体痛点。

怎么让保存自动格式化且不和 ESLint 冲突

Prettier 和 ESLint 同时启用时，editor.formatOnSave 一开就报红或格式反复来回改，本质是两者规则打架。关键不是关掉谁，而是让 ESLint 只管「逻辑对不对」，Prettier 只管「样式好不好」。

• 必须安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 末尾加上 'prettier'
• VSCode 设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode，别用 ESLint 自带的格式化
• 关闭 ESLint 的自动修复：删掉 "eslint.autoFixOnSave" 或设为 false，只保留 "editor.formatOnSave": true
• TS/JSX/Vue 文件默认都会生效；CSS/HTML 需确认 prettier.documentSelectors 包含对应语言 ID

为什么 Ctrl+点击别名路径（如 @/utils）跳不到文件

VSCode 默认不认识 @ 这类 Webpack/Vite 别名，不是插件问题，是配置缺失。装了插件也跳不了，说明路径映射没生效。

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"
• 例如："paths": { "@/*": ["src/*"] }，注意斜杠方向和通配符写法
• 装 lihuiwang.vue-alias-skip 或 alefragnani.Bookmarks 类插件只是辅助，核心还是 tsconfig/jsconfig 正确
• 改完配置后，必须重启 VSCode 或执行 Developer: Reload Window，否则缓存不更新

Vue/React 模板里变量悬停不显示定义位置

template 中写的 {{ user.name }} 或 v-bind:title="title"，鼠标悬停没提示、Ctrl+点击无效，大概率是语言服务没对上。

• Vue 2 项目用 Vetur，但必须关掉 Vetur > Experimental: Template Interpolation Service，否则和 ESLint 冲突
• Vue 3 + `