vscode本身不运行react项目，仅编辑代码；真正启动服务需在含package.json的根目录终端执行npm start或yarn start，路径错误会导致白屏、报错、跳转失效；须关闭javascript.validate.enable以消除jsx误报；eslint、typescript配置及launch.json中webroot与sourcemappathoverrides必须严格匹配打包器规则。
VSCode 本身不运行 React 项目，它只编辑代码；真正启动服务靠的是终端里的 npm start 或 yarn start ——但只要路径、依赖、配置中任意一环出错，就会白屏、报错、跳转失效。
打开项目必须进根目录，不是 src 子文件夹
VSCode 识别 React 项目的依据是存在 package.json 和 node_modules。如果你右键单击 src 文件夹 → “在 VSCode 中打开”，编辑器就看不到 package.json，导致 ESLint 不生效、useState 点不进去、自动导入全挂。
- 正确做法：在终端
cd到含package.json的文件夹，再执行code . - 验证方式：左下角状态栏悬停 Node 版本，显示 “unavailable” 就说明没装 Node 或 PATH 没配对
- 常见现象：
npm start报command not found或Cannot find module，八成是路径错了
JSX 报红但 npm start 能跑通？关掉 javascript.validate.enable
VSCode 内置的 JavaScript 语言服务对 JSX 支持极弱，尤其在纯 JS 的 React 项目里——useState、onClick、自定义组件标签全标红，但实际完全不影响运行。这不是代码问题，是校验器错位。
- 打开设置（
Ctrl+,或Cmd+,），搜索javascript.validate.enable，设为false - 确保已安装 ESLint 插件，并且项目根目录有
.eslintrc.js（推荐用eslint-config-react-app） - TypeScript 项目必须有
tsconfig.json，且"jsx": "react-jsx"这一项不能漏、不能拼错
launch.json 里 webRoot 和 sourceMapPathOverrides 必须配对
断点打在 src/App.js 却不触发？90% 是 sourcemap 路径映射错了：浏览器加载的是构建产物（比如 dist/assets/index.xxxx.js），但 VSCode 不知道它对应你哪一行源码。
- 先手动运行
npm start（CRA）或npm run dev（Vite），等控制台输出地址（如http://localhost:3000）再点 ▶️ 启动调试 -
webRoot值取决于打包器：CRA 填"${workspaceFolder}/src"，Vite 填"${workspaceFolder}" -
sourceMapPathOverrides必须匹配打包器路径：CRA 用"webpack:///src/*": "${webRoot}/../src/*"，Vite 用"*": "${webRoot}/../src/*"；少一个斜杠或写成src/**都会失效 - 调试类型必须是
pwa-chrome，不是chrome（后者在 VSCode 1.70+ 已废弃，会报Can't find Chrome）
ESLint 不提示 useEffect 依赖缺失？检查插件启用范围
useEffect 依赖数组警告来自 eslint-plugin-react-hooks，但它默认只校验 .js 和 .jsx 文件，如果项目用了 TypeScript 或混合后缀，容易漏掉。
- 确认
.eslintrc.js中启用了该插件：plugins: ['react-hooks']，且规则已开启：'react-hooks/rules-of-hooks': 'error' - 检查
overrides配置是否覆盖了javascriptreact语言模式（即 JSX 文件） - 若项目是 TS，还需确保
@types/react已安装：npm install --save-dev @types/react @types/react-dom
最常被忽略的是：webRoot 和 sourceMapPathOverrides 的路径层级差一级，或者 tsconfig.json 里 include 没包含 src，导致类型服务压根不加载——这些地方不显式报错，但所有跳转、提示、断点都无声失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
