最省事的是用 create-react-app 初始化项目：npx create-react-app my-app --template typescript，它自动配置 Webpack、Babel、ESLint、TypeScript 和热更新，避免手动配置出错。
用 create-react-app 初始化项目最省事
VSCode 本身不提供 React 运行时或构建能力，它只是编辑器。真正决定开发环境的是你用什么脚手架初始化项目、装哪些插件、以及本地有没有配套的 Node 工具链。最稳妥的起点是官方推荐的 create-react-app：
npx create-react-app my-app --template typescript它自动配好 Webpack、Babel、ESLint、TypeScript 支持和热更新，不需要你手动调
webpack.config.js 或改 babelrc。别自己从空文件夹 npm init 起手——容易漏掉 react-refresh 插件导致 HMR 失效，也容易配错 tsconfig.json 的 jsx 选项。
VSCode 必装的三个插件
装完项目后，打开文件夹进 VSCode，立刻装这三个插件，缺一不可：
-
ESLint（由dbaeumer.vscode-eslint提供）：React 官方模板默认启用 ESLint，但 VSCode 不装这个插件就看不到红色波浪线和自动修复提示 -
Prettier（esbenp.prettier-vscode）：React 项目常用 Prettier 格式化 JSX，但要注意关掉它的prettier.eslintIntegration（已废弃），改用eslint.format.enable+ 在.eslintrc.js里配extends: ['plugin:react/recommended', 'prettier'] -
Auto Rename Tag（formulahendry.auto-rename-tag）：改 JSX 开标签时自动同步闭标签，写<div>不用手动敲</div>
eslint-config-airbnb 报错。
package.json 里这几个 script 别乱动
刚生成的 create-react-app 项目，package.json 里有 start、build、test 三个核心 script。它们背后绑定了 react-scripts，而这个包把 Webpack 配置全封死了。常见错误包括：
- 想加 Sass 支持就去装
sass-loader并改 Webpack 配置——没用，react-scripts不认你手动加的 loader - 删掉
testscript 后发现npm test报错——因为 Jest 配置也藏在react-scripts里，删 script 不等于卸载 Jest - 把
start改成webpack serve——会直接启动失败，因为缺少react-dev-utils提供的 overlay 和错误拦截
craco 或 rescripts，而不是硬改配置文件。
调试 React 组件时，debugger 和断点别混用
VSCode 调试 React 依赖 Chrome Debugging Protocol，不是靠 Node.js debugger。要在组件里打断点，必须：
- 确保
launch.json里url指向http://localhost:3000（create-react-app默认端口），且webRoot设为${workspaceFolder}/src - 不要在函数组件顶层写
debugger——它会在每次 render 时触发，卡死页面；只在事件回调或 useEffect 里用 - 如果断点灰色不可达，先检查 Chrome 是否开了“停用缓存”，再确认
source map没被 UglifyJS 压缩掉（react-scripts开发模式默认开启 source map）
