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 和开发服务器,开箱即用。
重要:对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南,涵盖可视化...
- 推荐优先用
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。










