vue 3 开发必须用 volar 而非 vetur，因 vetur 不支持 vue 3 响应式编译模型，会导致类型错误、 不高亮、ts 类型推导失效；volar 基于 @vue/reactivity 实现精准解析，启用前须禁用 vetur 避免冲突。
Vue 3 开发必须装 Volar 而不是 Vetur
Vue 3 项目里用 Vetur 会出一堆类型错误、<script setup></script> 不高亮、TS 类型推导失效——这不是你配置错了，是 Vetur 本身不支持 Vue 3 的响应式编译模型。Volar 基于 @vue/reactivity 实现按需计算，能正确解析组合式 API 和 defineProps/defineEmits 类型。安装后记得在 VSCode 设置里禁用 Vetur（右键插件 → Disable (Workspace)），否则两者会冲突。
ESLint + Prettier 协同工作的关键配置点
单独装 ESLint 插件和 Prettier 插件还不够，容易出现保存时格式混乱或自动修复失败。必须做三件事：
• 在 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"
• 安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 数组末尾加上 'prettier'
• 确保 "editor.formatOnSave": true，但不要同时开 "editor.formatOnType"，否则 JSX 里敲 { 就触发格式化，打断输入流
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Live Server 不是万能的，静态资源路径容易错
Live Server 启动的是纯静态服务器，不走 webpack/vite 的模块解析逻辑。所以：
• import '@/utils/request' 这种别名路径会 404
• <img src="./assets/logo.png"> 在根目录打开 HTML 可能正常，但嵌套子路由下就挂掉
• 它默认不支持 public 目录映射，也不处理环境变量
真正需要调试构建产物时，应该用 vite preview 或 webpack serve，而不是依赖 Live Server
React 开发别漏掉 TypeScript 支持插件
只装 ES7+ React/Redux/React-Native snippets 不够，JSX 里写 useState<string>()</string> 会报红——因为缺少 TS 语言服务。必须额外装：
• Typescript React Code Snippets（补全带泛型的 hooks）
• ESLint 插件 + @typescript-eslint/parser 配置（检查类型用法）
• 如果用 create-react-app，确保 tsconfig.json 中 "jsx": "react-jsx" 已启用，否则 JSX element type 错误不会消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
