如何在VSCode中关联本地Node环境 - 前端开发起步指南-VSCode-PHP中文网

VSCode终端找不到node命令，90%是环境变量未被继承：Windows因Node安装时未勾选“Add to PATH”或PowerShell与CMD环境变量不共享，macOS/Linux因GUI启动跳过~/.zshrc加载；须在VSCode终端执行which node或where node验证，无输出则需重装Node并勾选PATH、修正shell配置或手动补全PATH。

如何在vscode中关联本地node环境 - 前端开发起步指南

VSCode 里 node 命令不可用，90% 是环境变量没被终端继承，不是配置写错了。

为什么 VSCode 终端找不到 `node`？

你可能在系统终端（如 Windows CMD、macOS Terminal）里跑 node -v 没问题，但一进 VSCode 的 Ctrl+` 终端就报 command not found 或 'node' is not recognized。这不是 VSCode 故障，而是它启动时用的 shell 没加载你的环境变量。

Windows 上 VSCode 默认用 PowerShell，而你配 PATH 可能只加在 CMD 的用户变量里
macOS/Linux 上 VSCode 启动的是非登录 shell（比如 zsh），不会读 ~/.zshrc 里新增的 export PATH=...，除非你显式配置
Node 安装时没勾选 “Add to PATH”（尤其是 Windows MSI 安装器），PATH 根本没写进去

验证和修复 `node` 可执行性最简三步

别跳过这步直接写 launch.json——断点全灰、调试器起不来，根源都在这儿。

在 VSCode 里按 Ctrl+` 打开终端，立刻运行：which node（macOS/Linux）或 where node（Windows）；如果无输出，说明命令根本不可见
接着跑 npm -v，失败意味着全局工具链（比如 nodemon）后续也无法调用
修复方式：重装 Node.js 并务必勾选 “Add to PATH”；macOS 若用 Homebrew，检查 ~/.zshrc 是否有 export PATH="/opt/homebrew/bin:$PATH" 并执行 source ~/.zshrc；Windows 用户确认系统环境变量 PATH 里包含 C:\Program Files\nodejs\（或你自定义的安装路径）

`launch.json` 中 `program` 路径必须是绝对路径

VSCode Node 调试器对路径极其敏感，相对路径、${workspaceRoot}、甚至少一个 / 都会导致断点失效或启动失败。

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

入口文件路径必须写成 ${workspaceFolder}/app.js 这种形式，不能写 ./app.js 或 app.js
确保项目根目录下存在 .vscode/launch.json，最小可用配置只需包含 type: "node"、request: "launch"、program 和 console: "integratedTerminal"
如果用 nodemon 调试，launch.json 里得加 runtimeArgs: ["--inspect-brk"]，否则断点进不去

断点灰色、不命中？先关掉 `skipFiles` 和检查 Source Map

即使 node 和路径都对了，断点仍不生效，大概率是调试器跳过了源码映射。

打开 launch.json，确认没有设置 "skipFiles": ["/**"] —— 这个默认值会屏蔽所有源码，清空它
确保你的代码构建过程开启了 source map（例如 TypeScript 的 tsconfig.json 里 "sourceMap": true，或 webpack 的 devtool: "source-map"）
如果用 Babel 编译，检查 .babelrc 或 babel.config.js 是否启用了 sourceMaps: true