最省事的是用 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，立刻装这三个插件，缺一不可：
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> 不用手动敲 <code>
别信“全栈插件包”或“React 专用主题”，那些反而容易和 ESLint 规则冲突，比如强制单引号就可能跟项目里的
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
- 删掉
test script 后发现 npm test 报错——因为 Jest 配置也藏在 react-scripts 里，删 script 不等于卸载 Jest
- 把
start 改成 webpack serve——会直接启动失败，因为缺少 react-dev-utils 提供的 overlay 和错误拦截
真要定制（比如加 alias 或 proxy），得用
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）
React DevTools 浏览器插件比 VSCode 断点更适合看 props/state 变化，VSCode 断点更适合查异步链路或副作用逻辑。
