vue项目中volar和vetur不能共存，因二者均注册.vue语言服务但底层协议不兼容，会导致类型推导失效、ref跳转失败、defineprops无提示等问题；必须禁用或卸载vetur并启用volar。
为什么 Prettier 和 ESLint 不能只装一个
只装 Prettier 会格式化代码但不报错，只装 ESLint 可能因规则冲突导致保存时反复“格式-报错-再格式”循环。两者定位不同：Prettier 是风格强制器，ESLint 是逻辑守门人。
常见错误现象：ESLint 报 Expected indentation of 2 spaces but found 4，而你明明开了 editor.formatOnSave；本质是 eslint-config-prettier 没启用，或 settings.json 里没设 "editor.defaultFormatter": "esbenp.prettier-vscode"。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends中靠后加入，覆盖 Prettier 冲突规则 -
settings.json中禁用editor.formatOnType（易引发光标跳动），只保留editor.formatOnSave: true - Vue 项目需额外加
plugin:vue/vue3-essential，否则v-model或defineProps会被误报
Path Intellisense 怎么让 alias 路径补全生效
写了 @/components/Button.vue 却补不出文件？不是插件坏了，而是它默认不识别 Webpack/Vite 的 alias 配置。
使用场景：Vite 项目中 jsconfig.json 已配 "@": ["src"]，但 import 时敲 @/ 无提示。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确认
jsconfig.json或tsconfig.json存在于项目根目录，且compilerOptions.baseUrl和paths正确 - VS Code 设置里搜
path intellisense，打开Path Intellisense: Auto Rename和Path Intellisense: Include Subfolders - 重启 VS Code —— 这步常被跳过，但插件读取
jsconfig.json是启动时一次性加载的
Vue 项目里 Volar 和 Vetur 能共存吗
不能。Volar 是 Vue 3 官方推荐，Vetur 已停止维护；两者同时启用会导致类型推导错乱、ref 提示失效、甚至 setup() 语法高亮消失。
错误现象：defineProps 下划线报红，但实际运行无问题；或者 F12 跳转到 node_modules 里的类型声明而非项目源码。
- 卸载
Vetur前先关掉所有.vue文件标签页，否则 VS Code 可能缓存旧语言服务 - 安装
Volar后，在命令面板（Ctrl+Shift+P）运行Volar: Restart Server - 若用 TypeScript，确保
tsconfig.json中有"types": ["volar"]，否则defineEmits等宏无法正确推导
Live Server 修改 HTML 后页面不自动刷新怎么办
不是插件坏了，大概率是当前 HTML 文件没被 Live Server 当作入口——它只监听当前活动标签页（active tab）的变更，且默认不支持嵌套路由或构建产物目录。
典型场景：你在 src/index.html 上改了内容，但浏览器打开的是 http://localhost:5500/dist/index.html（构建后路径）。
- 右键点击要预览的 HTML 文件 → “Open with Live Server”，而不是点底部状态栏的 “Go Live”
- 检查插件设置里
liveServer.settings.donotShowInfoMsg是否为true，设为false可看到实时端口和根路径提示 - 若用 Vite/React/Vue CLI，别依赖 Live Server 做开发服务器——它不解析
import、不处理jsx，仅适合纯静态 HTML 快速验证
vite.config.ts 里的 alias —— 它只认 jsconfig.json。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
