volar是vue 3项目唯一推荐的语言支持插件，必须启用takeovermode、禁用vetur、配置tsconfig.json的baseurl和paths，否则报错、类型提示失效、跳转失败。
Volar 已取代 Vetur 成为 Vue 3 项目唯一推荐的语言支持插件，不装它，<script setup></script> 会报错、TypeScript 类型提示基本失效。
Vue 项目必须用 Volar 而不是 Vetur
Vue 3 + TypeScript 项目里，Vetur 的语言服务在 <script setup></script> 下完全失能：无法跳转定义、无类型推导、ref() 返回值类型常显示为 any。Volar 基于 @vue/reactivity 实现按需响应式追踪，原生支持 SFC 全语法，包括 defineProps 和 defineEmits 的自动类型推导。
- 安装后需禁用 Vetur（右键插件 → Disable (Workspace)），否则两者冲突导致语法高亮错乱、
F12跳转失败 - 若项目含 Vue 2 与 Vue 3 混合，Volar 默认只激活 Vue 3 模式；需手动在
.vscode/settings.json中添加："volar.enableForAllProjects": true - 遇到
Property 'xxx' does not exist on type 'ComponentCustomProperties'报错，大概率是没启用volar.takeOverMode—— 在设置中搜索并开启它
React 开发别再只靠 snippets，加装 React Refactor
单纯用 rfc 或 cc 生成组件模板，解决不了重构痛点。比如想把一段 JSX 提取成独立组件、把类组件转成函数组件、批量重命名 props，React Snippets 完全无能为力。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
React Refactor支持选中任意 JSX 片段 → 右键 →Extract to Component，自动生成新文件、注入import、替换原调用，连默认 props 类型都帮你写好 - 对
useEffect依赖数组误写、useState初始化值类型不匹配等常见问题，它会在编辑器内直接标红并给出快速修复建议 - 注意：它和
ES7+ React/Redux/React-Native snippets功能不重叠，建议共存 —— 前者管“建”，后者管“改”
别名路径跳转失效？不是 webpack 配置问题，是插件没配对
写了 import { api } from '@/utils/request' 却 Ctrl+Click 不跳转？90% 是因为 VS Code 没识别出 @ 指向 src。这不是 tsconfig.json 或 webpack.alias 的锅，而是路径解析插件缺失或配置错误。
- 推荐插件：
@ext:lihuiwang.vue-alias-skip（轻量、专注、无依赖）或Path Intellisense（功能更全但需额外配置） - 配置关键项必须写进工作区
.vscode/settings.json，而非用户全局设置："path-intellisense.mappings": { "@": "${workspaceFolder}/src" } - 如果项目用的是
tsconfig.json的baseUrl+paths，优先用官方TypeScript Server Plugin方案：安装typescript-plugin-css-modules并在tsconfig.json中启用"plugins"字段
Live Server 不只是刷新页面，它得配对 sourcemaps 才算真调试
用 Live Server 启动 HTML 页面时，控制台报错行号总指向打包后文件（如 bundle.js:1234），而不是你写的 index.tsx —— 这说明 sourcemaps 没生效，调试等于盲操作。
- 确保项目构建工具（Vite/Webpack/Rollup）已开启
sourceMap: true，且输出目录包含.map文件 - 在
Live Server设置中打开："liveServer.settings.AdvanceCustomBrowserCmdLine": ["--auto-open-devtools-for-tabs"]，让浏览器自动打开 DevTools - 若用 Vite，更推荐直接运行
vite preview而非 Live Server —— 它内置完整 sourcemaps 支持，且热更新更准
真正卡住前端开发效率的，往往不是“缺插件”，而是多个插件之间没对齐语言服务模式、路径解析逻辑或 sourcemaps 链路。一个 Ctrl+Click 跳不过去，可能要查三处配置：插件开关、工作区 settings、构建工具 sourcemaps 输出位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
