React开发环境需先安装Node.js和包管理器，再用Vite或create-react-app初始化项目，配合VSCode必要扩展及jsconfig.json配置才能正常运行和编辑。
VSCode 本身不提供 React 开发环境，它只负责编辑和调试；真正起作用的是 Node.js、npm/yarn、React 脚手架（如 create-react-app 或 vite）以及 VSCode 的扩展配合。直接装一堆插件但没配好底层工具链，写不了 JSX、跑不起来、报错 Module not found: Can't resolve 'react' 是常态。
安装 Node.js 和包管理器是前提，不是可选项
VSCode 不会帮你装 Node.js。没有它，npx create-react-app 这类命令根本执行不了，终端里会直接报 command not found: npx。
- 去 nodejs.org 下载 LTS 版本（不是 Current），安装时勾选 “Add to PATH”
- 安装后在终端运行
node -v和npm -v，确认输出版本号（例如v20.11.1和10.2.4） - 别用系统自带的 Node（比如 macOS 的
/usr/bin/node），它通常太老或权限受限，容易导致npm install失败或permission denied
用 create-react-app 或 vite 初始化项目，别手动搭
手动配 Webpack + Babel + ESLint + TypeScript？99% 的新项目没必要。官方脚手架已内置 JSX 支持、热更新、ESLint 规则和开发服务器。
- 推荐
vite：速度快，TS 开箱即用，命令是npm create vite@latest my-react-app -- --template react - 如果必须用
create-react-app，注意它默认不支持 JSX 文件自动识别旧版语法（如class组件），且已停止主动维护 - 初始化完进项目目录，运行
npm install（确保没跳过），再运行npm run dev或npm start，看到本地服务启动成功才算环境通了
VSCode 扩展只补能力，不替代配置
装了 ES7+ React/Redux/React-Native snippets 却写不出 useEffect 提示？大概率是因为没开 TypeScript 支持或项目没配 jsconfig.json / tsconfig.json。
- 必装扩展：
ESLint（需项目有.eslintrc.cjs）、Prettier（配"editor.formatOnSave": true）、Auto Import（依赖jsconfig.json中"compilerOptions.baseUrl"） - JSX 语法高亮和跳转依赖
jsconfig.json：根目录下新建该文件，内容至少含{"compilerOptions": {"baseUrl": "src"}}，否则import Button from 'components/Button'会标红且无法 Ctrl+Click 跳转 - 禁用 VSCode 自带的
TypeScript and JavaScript Language Features扩展？别。它是核心语言服务，关了就没了智能提示和错误检查
常见报错和对应检查点
不是所有红波浪线都代表代码写错了，很多是环境没对齐。
-
Cannot find module 'react' or its corresponding type declarations→ 检查node_modules/react是否存在，npm install是否成功，VSCode 是否打开了项目根目录（不是 src 子目录） - JSX 元素类型不存在、
React.Fragment报错 → 确认jsconfig.json或tsconfig.json中有"jsx": "react-jsx"且"lib"包含"DOM" - 保存后格式化失效、Prettier 不生效 → 查看右下角状态栏是否显示 “Prettier”，点击它确认当前文件关联的是
javascriptreact类型（不是javascript），并在settings.json中加"files.associations": {"*.jsx": "javascriptreact"}
React 开发环境的问题，80% 出现在 Node 工具链和项目配置层面，而不是 VSCode 界面设置。别在设置里狂搜“React theme”或“JSX color”，先让 npm run dev 跑起来，再让编辑器识别清楚项目结构——这才是最实在的起点。
