vs code 的 react/vue 智能支持依赖精准配置的扩展与语言服务：react 需 eslint、typescript typings；vue 3 必装 volar 并禁用 vetur；tsconfig.json/jsconfig.json 必须正确配置路径与选项，且需关闭冲突设置如 vetur 和 javascript.validate.enable。
VS Code 本身不内置 React 或 Vue 的智能支持，所有框架相关能力（如组件语法高亮、ref 类型推导、setup 脚本补全、JSX/TSX 错误检查）都依赖正确配置的扩展与语言服务——配错一个关键项，就可能让 useState 不提示、defineComponent 报红、或 .vue 文件里 script setup 完全无类型信息。
装对扩展：不是越多越好，而是要匹配项目语言栈
React 和 Vue 的核心支持来自官方或社区维护的语言服务器，不是靠“前端神器”类打包扩展：
- React（TSX）：必须装
ESLint（配合eslint-plugin-react和@typescript-eslint）、TypeScript Typings（确保 VS Code 内置 TS 服务能读取node_modules/@types/react），Auto Import可选但实用 - Vue 3（
.vue+script setup）：必须装Volar（不是 Vue Peek 或 Vetur！Vetur 已弃用且不支持script setup类型推导），禁用 Vetur；若用 TS，还需确认typescript-vue-plugin是否被 Volar 自动启用 - 共用基础：
Prettier（格式化）、ESLint（校验）、Import Sorter（可选）
项目级 tsconfig.json / jsconfig.json 是类型服务的开关
VS Code 的 TypeScript 服务默认只在根目录下找 tsconfig.json，如果没这个文件，或它没正确包含源码路径，ref() 的返回值类型、useRouter 的类型、甚至 JSX 元素都会显示为 any。
- Vue 项目：确保
tsconfig.json中有"include": ["src/**/*"]，且已安装@vue/runtime-core和@vue/macros（如用defineOptions） - React + TS：确认
"jsx": "react-jsx"已设置，否则.tsx文件里<div> 会报 “Cannot use JSX unless either 'jsx' option is specified” <li>纯 JS 项目（无 TS）：必须提供 <code>jsconfig.json，内容至少含{"compilerOptions": {"allowJs": true, "checkJs": false}, "include": ["src/**/*"]}，否则 Volar/React 插件无法索引 JS 组件 - 打开命令面板（
Ctrl+Shift+P），运行Developer: Toggle Developer Tools，看 Console 是否报Vetur is disabled because Volar is enabled—— 这说明你同时启用了两个冲突的语言服务器，必须手动禁用 Vetur - 检查 VS Code 设置里是否勾选了
javascript.validate.enable：如果项目用 TS，应关掉它，否则 JS 文件会触发两套校验逻辑，导致import { ref } from 'vue'在.js里报未定义 - Vue 项目中，右下角状态栏点击
Vue (Volar)，确认当前模式是Vue (Volar)而非Vue (Vetur)或TypeScript
关闭干扰项：Vetur、TypeScript 的 “Disable JavaScript Validation” 常是罪魁祸首
很多问题不是缺插件，而是旧插件或错误设置在抢夺控制权：
立即学习“前端免费学习笔记（深入）”；
真正卡住人的往往不是“怎么装”，而是“为什么装了还不生效”——比如 tsconfig.json 放在子目录、Volar 被 Vetur 静默覆盖、或者 ESLint 配置里漏了 parserOptions.project 导致类型检查失效。这些点不手动验证，光看教程步骤只会反复重启 VS Code。
