不能共存，必须禁用vetur；volar是vue 3官方推荐语言服务，支持、defineprops等原生ts类型推导，而vetur在vue 3+ts场景下存在cpu高、提示错漏、不支持组合式api等问题。
VSCode 前端开发效率高低，80% 取决于插件选得准不准、配得对不对——不是装得越多越好，而是关键链路不能断。
Vue 3 项目里 Volar 和 Vetur 能共存吗？
不能，且必须禁用 Vetur。Volar 是 Vue 3 官方推荐的语言支持插件，基于 @vue/reactivity 实现响应式依赖追踪，对 <script setup></script>、defineProps、defineEmits 提供原生 TS 类型推导；而 Vetur 在 Vue 3 + TS 场景下 CPU 占用高、类型提示错漏多、不支持组合式 API 的完整语义。
- 安装
Volar后，务必在 VSCode 插件管理页搜索Vetur→ 点击「禁用」（不是卸载，避免残留激活） - 检查
settings.json中是否含"vetur.validation.script": true等残留配置，删掉 - 重启 VSCode，打开 .vue 文件，状态栏右下角应显示
Vue (Volar)，不是Vue (Vetur)
ESLint 和 Prettier 冲突时谁该让步？
Prettier 负责格式，ESLint 负责逻辑与规范，二者定位不同。冲突通常出现在分号、引号、结尾逗号等风格项上——此时应让 ESLint 放弃格式控制权，交由 Prettier 统一处理。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安装
eslint-config-prettier，并在.eslintrc.js的extends数组末尾加入'prettier' - VSCode 设置中启用
"editor.formatOnSave": true，并指定"editor.defaultFormatter": "esbenp.prettier-vscode" - 避免同时开启
ESLint的--fix和Prettier的保存格式化，否则可能反复来回改
路径别名（如 @/components）点不进文件？
这是常见但容易被误判为“插件问题”的配置缺失。VSCode 默认不识别 Webpack/Vite 的 resolve.alias，需靠插件或配置桥接。
- 推荐插件：
Path Intellisense（基础路径补全）+Alias Navigator或Vue Alias Skip（专解@/~跳转） - 关键一步：确保项目根目录有
jsconfig.json（JS）或tsconfig.json（TS），内含"baseUrl"和"paths"配置，例如：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - 修改配置后必须重启 VSCode，否则跳转仍失效
Auto Rename Tag 在 JSX/TSX 里不生效？
默认情况下，Auto Rename Tag 只对 html 和 xml 语言模式启用。React 开发者常忽略这点，导致在 .tsx 文件里改开头标签，闭合标签不动。
- 打开 VSCode 设置 → 搜索
autoRenameTag→ 找到Auto Rename Tag: Enabled Languages - 点击「Edit in settings.json」，添加：
"auto-rename-tag.activationOnLanguage": ["html", "javascript", "typescript", "javascriptreact", "typescriptreact"]
- 注意：
javascriptreact对应 .jsx，typescriptreact对应 .tsx，漏掉任一都会失效
真正卡住前端开发的，往往不是某个插件没装，而是插件之间隐性依赖没打通——比如 Volar 需要 tsconfig.json 支持，Alias Navigator 依赖 jsconfig.json 配置，ESLint 和 Prettier 共存要靠 eslint-config-prettier 拆墙。这些点不手动确认，装再多插件也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
