Vue 3 开发必须用 Volar 而非 Vetur，因后者会导致类型推导失效、ref 解构失类型、defineProps 泛型不识别等问题；Volar 官方推荐，深度集成 TS 服务，正确解析组合式 API 类型流。
Vue 3 开发必须用 Volar，不是 Vetur
Vue 3 项目里装 Vetur 会直接导致类型推导失效、ref() 解构后丢失类型、defineProps 泛型不识别等问题。Volar 是 Vue 官方推荐的替代方案，它基于 TypeScript 语言服务深度集成，能正确解析 <script setup></script> 语法和组合式 API 的类型流。
常见错误现象：在 .vue 文件中鼠标悬停变量无提示、props 上点不了跳转、保存后格式化把 setup 语法弄乱——大概率是 Vetur 还在后台运行。VS Code 默认禁用冲突插件，但需手动确认：卸载 Vetur，重启 VS Code，再装 Volar。
- 安装后默认启用，无需额外配置；如需开启模板内表达式检查，确保项目根目录有
tsconfig.json或jsconfig.json - 若使用 Nuxt 3，需额外安装
Nuxi插件配合 Volar 使用，否则useAsyncData等钩子无法识别 - 旧项目从 Vue 2 升级上来，注意关闭 Volar 的“Take Over Mode”（设置中搜
volar.takeOverMode），避免干扰其他语言文件
React 开发推荐同时装 ESLint + Prettier + React Refactor
React 没有像 Volar 那样强绑定的框架专属插件，但三个工具组合起来能覆盖编码、校验、重构全流程。单独装 ESLint 插件只负责报错，Prettier 只管格式，而 React Refactor 能真正改变开发节奏——比如选中一段 JSX，右键 “Extract to Component”，立刻生成新文件并自动导入。
容易踩的坑：Prettier 和 ESLint 规则打架（比如分号、引号），必须用 eslint-config-prettier 关闭 ESLint 中与格式相关的规则；否则保存时反复格式化又报错。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
ESLint插件需配合项目本地安装的eslint和eslint-plugin-react才生效，全局安装无效 -
React Refactor对函数组件支持好，类组件重构功能有限，遇到componentDidMount类方法时建议手动处理 - 如果用 TypeScript + React，确保
tsconfig.json中"jsx": "react-jsx"已设置，否则 JSX 片段无法被正确解析
路径别名跳转必须配 Path Autocomplete 或 Alias Navigator
写 import { api } from '@/services/api' 时 Ctrl+点击没反应？这不是 VS Code 的锅，是路径别名没被识别。Webpack/Vite 的 @ 别名只是构建时有效，编辑器本身不知道它指向 src/。不解决这个问题，跳转、重命名、自动补全都成摆设。
Path Autocomplete 更轻量，开箱即用；Alias Navigator（或 vue-alias-skip）专为 Vue 项目优化，能读取 vite.config.ts 中的 resolve.alias 配置，兼容性更强。
- 配置关键点：在
settings.json中加"path-autocomplete.pathMappings"，例如{"@": "${folder}/src"}；注意${folder}是工作区根目录，不是文件所在目录 - 如果项目用了多层别名（如
@@/utils指向src/utils），单靠 Path Autocomplete 不够，得换用支持正则映射的插件 - Vite 项目若用
defineConfig动态生成 alias，插件可能读不到——此时只能手写静态映射，或改用vite-plugin-pwa类插件提供的 alias 透出机制
调试阶段别漏掉 Debugger for Chrome 或 Web Server for Chrome
前端调试不等于 console.log。真要查状态流转、断点进 hook、看 effect 执行顺序，必须让 VS Code 和浏览器 DevTools 连起来。Chrome 调试插件现在叫 Debugger for Edge（微软已合并支持），但配置项仍沿用旧名，容易混淆。
最常卡住的一步是 launch.json 里 webRoot 设错：它必须指向浏览器实际加载的 HTML 所在目录，不是源码目录。比如 Vite 项目启动后访问的是 http://localhost:5173/，对应的是构建产物临时目录，但你通常要设成 "${workspaceFolder}"，因为 Vite 开发服务器是直接读源码的。
- 如果用 Vite + React，建议搭配
Vite Plugin Inspector，它能在浏览器里直接点击组件跳回 VS Code 对应代码行，比纯断点更直观 - Vue 项目优先用
Vue.js Devtools浏览器扩展，VS Code 插件只负责断点；两者不冲突，但不要重复装Debugger for Chrome和Debugger for Firefox同时启用 - 某些企业内网环境禁用本地 localhost 调试，此时需在
launch.json中加"url": "http://your-intranet-domain/"并配好 sourcemaps 路径映射
webRoot 配置，是框架插件之外最容易被忽略的两个硬性依赖点。它们不显眼，但一旦出错，整个开发流就会卡在“跳不进去”“断不下来”的状态里。 
