VSCode是开发React Native应用的轻量高效选择，通过配置Node.js、JDK、Android Studio/Xcode及必备插件（如ESLint、React Native Tools、JavaScript Debugger等），可实现代码编写、热重载、断点调试、日志查看全流程闭环。
VSCode 是开发 React Native 应用的轻量高效选择，配合合适插件和配置，能实现代码编写、实时预览、断点调试、日志查看等完整流程。
必备插件与环境准备
确保已安装 Node.js、JDK、Android Studio（含 SDK/NDK/Emulator）或 Xcode（macOS），并配置好 ANDROID_HOME 或 XCODE_DEVELOPER_DIR 环境变量。然后在 VSCode 中安装以下插件：
- ESLint：提供 React/TypeScript 语法检查和自动修复
- React Native Tools：官方插件，支持命令面板启动调试、设备选择、重载、日志流
- Debugger for Chrome / Debugger for Edge（旧版 JS 调试）或直接使用 JavaScript Debugger（VSCode 内置，推荐）
- Bracket Pair Colorizer 或 Highlight Matching Tag：提升 JSX 可读性
快速启动与热重载
在项目根目录运行 npx react-native start 启动 Metro 打包器，再新开终端执行 npx react-native run-android 或 run-ios 部署到设备或模拟器。在 VSCode 中：
- 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 “React Native: Run Android” 快速部署
- 保存文件后，App 默认启用热重载（Hot Reloading）；如需完整刷新，摇动设备调出开发者菜单 → 点击 “Reload”
- 可在 settings.json 中添加
"react-native.packager.port": 8081指定 Metro 端口
断点调试 JavaScript/TypeScript
无需额外配置 Chrome，VSCode 原生 JavaScript Debugger 即可完成真机/模拟器调试：
- 确保 App 处于调试模式：摇动设备 → “Debug” 或在模拟器中按 Cmd+D / Ctrl+M → 选 “Debug”
- 在 VSCode 中打开项目，点击左侧调试图标，选择 “React Native Debug” 启动配置（首次会自动生成
.vscode/launch.json） - 在代码行号左侧点击设断点，触发对应逻辑即可停住，支持查看变量、调用栈、执行控制台命令
- 若调试无响应，检查 Metro 是否运行、设备是否连通、
debugger;语句是否被忽略（建议优先用断点而非 debugger）
查看日志与设备管理
避免反复切到终端看 logcat 或 console 输出：
- VSCode 底部状态栏点击 “React Native” 图标，可快速打开日志面板，实时显示 JS 控制台输出和原生错误
- 通过 “React Native: Show Device Log” 命令查看 Android logcat 或 iOS device console（需 Xcode 工具链）
- 使用 “React Native: Launch Packager” 和 “React Native: Stop Packager” 统一管理 Metro 进程
- 连接多台设备时，可用 “React Native: Select Device” 切换目标，避免手动指定 --deviceId
基本上就这些。熟练后整个流程可在 VSCode 内闭环完成，不依赖 Android Studio 或 Xcode 的编辑功能，专注逻辑开发与问题定位。
