必须配 eslint-config-prettier，因其用于关闭 eslint 中与 prettier 冲突的格式规则，避免“加分号”等反复冲突；需安装该包、在 extends 末尾添加 'prettier'，并禁用 vscode 内置格式化。
ESLint + Prettier 组合为什么必须配 eslint-config-prettier
不加这个包，eslint 和 prettier 会打架：一个说“该加分号”，另一个说“不该加”，保存时反复格式化又报错。真实现象是编辑器右下角频繁弹出冲突提示，Format On Save 失效，甚至自动修复（--fix）后代码被改乱。
正确做法是：
- 安装
eslint-config-prettier插件（不是仅 npm install，VSCode 扩展市场里也要装） - 在
.eslintrc.js的extends数组末尾加上'prettier'，确保它覆盖前面所有格式规则 - 禁用 VSCode 内置的
javascript.format.enable，只让 ESLint + Prettier 控制 JS/TS 格式
Vue 项目里 Volar 和 Vetur 能不能共存
不能。两者同时启用会导致语法高亮错乱、<script setup></script> 无法识别、类型提示失效，甚至打开 .vue 文件时 CPU 占用飙升到 90%+。
判断依据很直接：
- Vue 2 项目 → 只装
Vetur，关掉 Volar - Vue 3 + TypeScript 项目 → 只装
Volar，卸载 Vetur，并在 VSCode 设置里把vue.preferences.useVolarForVue2设为false - 检查是否生效：打开一个
.vue文件，按Ctrl+Click跳转组件定义，能跳且无报错才算正常
路径别名（如 @/components）点不进文件怎么办
这不是插件没装对，而是 VSCode 不知道 @ 指向哪。Path Intellisense 可以补全路径，但跳转依赖 jsconfig.json 或 tsconfig.json 的 paths 配置。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
常见漏项：
- 配置写在了
tsconfig.json，但项目是 JS 项目 → 必须同步复制到jsconfig.json -
baseUrl设成了"src"，但paths里写的是"@/*": ["src/*"]→ 实际应设为"."，否则解析失败 - 改完配置没重启 VSCode → 必须完全关闭窗口再重开，热重载不生效
Auto Rename Tag 在 JSX 里失效的典型原因
它默认只处理 HTML/XML 类型文件。React 项目中 .tsx 或 .jsx 文件若未被识别为 HTML 类型，插件就静默退出。
解决方法只有两个：
- 在 VSCode 设置里搜
files.associations，加一条："*.jsx": "html"或"*.tsx": "html" - 更稳妥的做法是换用
Auto Close Tag+Highlight Matching Tag组合：前者确保标签闭合，后者高亮配对，比强行 rename 更可靠
别名跳转、JSX 标签同步、格式化冲突——这些不是“装了插件就完事”的问题，而是配置链上任意一环断开就会卡住。尤其当团队共用一套配置时，jsconfig.json 和 .eslintrc.js 的存在与否，比插件本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
