VSCode本身不提供Node运行环境，仅调用本地已安装的node和npm；所有配置前提必须是node -v和npm -v在终端中正常输出版本号，否则后续调试、脚手架初始化等均会失败。
VSCode 本身不提供 Node 运行环境，它只负责编辑和调试；真正起作用的是你本地安装的 node 和 npm，以及你选用的脚手架（如 vite 或 create-react-app）。没配好 Node，npx create-react-app 会直接报 command not found: npx，连项目都建不起来。
确认 node 和 npm 已正确安装并可用
这是所有后续操作的前提，跳过等于白忙活。很多报错表面是“找不到 react”，根源其实是 node 没装、路径没加进系统变量，或者用了系统自带的老旧版本。
- 打开终端（Windows 用 PowerShell 或 CMD，macOS/Linux 用 Terminal），运行
node -v和npm -v，必须看到类似v20.11.1和10.2.4的输出 - 别用 macOS 自带的
/usr/bin/node—— 它通常太老，且权限受限，容易导致npm install失败或报permission denied - 安装时务必勾选 “Add to PATH”（Windows）或手动把 Node 安装目录加入
$PATH（macOS/Linux），否则 VSCode 终端里照样找不到node - 如果用
nvm管理多版本，确保当前激活的是 LTS 版本：nvm use lts，再验证node -v
用 vite 或 create-react-app 初始化项目，别手动配 Webpack/Babel
手动搭环境对 99% 的新项目毫无必要，反而容易出错。官方脚手架已内置 JSX 支持、热更新、ESLint 和开发服务器，开箱即用。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 推荐优先用
vite：启动快、TS 开箱即用、依赖更轻。命令是：npm create vite@latest my-react-app -- --template react - 如果必须用
create-react-app，注意它已停止主动维护，且默认不支持旧版 JSX 语法（比如class组件），某些 ESLint 规则也需额外配置 - 无论选哪个，初始化后必须进项目目录执行
npm install（不能跳过），再运行npm run dev（vite）或npm start（CRA），看到本地服务启动成功才算通了 - 别全局安装
create-react-app：npm install -g create-react-app容易版本混乱；用npx create-react-app更安全
VSCode 扩展与配置只需聚焦核心功能
装一堆插件但没理清底层工具链，照样写不了 JSX、跳转失败、断点无效。重点就三件事：语法高亮、类型提示、调试支持。
- 必装扩展：
ESLint（配合项目里的.eslintrc.js）、Prettier（设为默认格式化工具）、Path Intellisense（路径自动补全） -
Debugger for Chrome或Edge已基本淘汰；现代 React 项目推荐用 VSCode 内置的JavaScript Debugger（已默认启用），配合launch.json中"type": "pwa-chrome"即可调试 - 在项目根目录加
jsconfig.json（React + JS）或tsconfig.json（TS），内容至少包含"compilerOptions": { "baseUrl": "src", "paths": { "@/*": ["*"] } }，否则 VSCode 无法正确解析import路径 - 别在
settings.json里盲目加"files.exclude"排除node_modules——VSCode 本身就会自动忽略；真正该排除的是构建产物目录（如dist、build）
最容易被忽略的一点：VSCode 的终端是否继承了正确的 shell 环境变量。如果你在系统终端里 node -v 正常，但在 VSCode 内置终端里报错，大概率是 VSCode 启动时没加载你的 shell 配置（比如 ~/.zshrc 或 ~/.bash_profile）。这时候不是重装 Node，而是检查 VSCode 设置里的 terminal.integrated.defaultProfile.* 是否指向了你日常用的 shell。
