VSCode 完全支持 React Native 开发与调试，需配置 Node.js、JDK 17、Android Studio/Xcode、CLI 工具及 adb/xcode-select；必装 ESLint、Auto Import、React Native Tools 等插件；新版推荐 JS Debug Terminal 调试，Expo 项目可直接 Attach to Packager。
用 VSCode 进行 React Native 开发与调试完全可行，而且体验流畅——关键在于配置好环境、插件和调试入口。
基础环境必须到位
VSCode 本身不运行 React Native，它只是编辑器。你仍需在系统中安装：
- Node.js（建议 v18+）
- JDK 17（Android 开发必需）
- Android Studio（含 SDK、AVD、Command Line Tools）或 Xcode（macOS 开发 iOS）
- React Native CLI 或 Expo CLI（根据项目类型选）
- 确保 adb 可命令行调用（Android）、xcode-select --install 已执行（iOS）
VSCode 必装插件
这些插件能显著提升开发效率：
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- ESLint：实时校验 JS/TS 语法和 React 最佳实践
- Auto Import：自动补全并插入 import 语句
- Bracket Pair Colorizer（或内置的括号高亮）：看清嵌套层级
- React Native Tools（微软官方）：提供命令面板集成、设备选择、重载、日志过滤等核心功能
- Debugger for Chrome / Debugger for Edge（旧版 RN）或直接使用 JS Debug Terminal（新版 RN 推荐）
调试 React Native 应用（以 Android 为例）
新版 React Native（0.72+）默认使用 Hermes 引擎 + JS Debug Terminal，无需 Chrome：
- 启动模拟器或连接真机（adb devices 确认在线）
- 终端运行 npx react-native run-android
- 应用启动后，在 VSCode 中按 Ctrl+Shift+P（Win/macOS），输入 Debug: Toggle Auto Attach 启用自动附加
- 再按 F5 → 选择 Debug in Chrome 或更推荐的 Debug in Terminal (JS)
- 在 JS 文件中打上断点，触发对应逻辑即可停住，查看变量、调用栈、执行表达式
若用 Expo 项目，调试更简单：启动 npx expo start，扫码打开 App，然后在 VSCode 中按 F5 选 Attach to Packager 即可。
实用技巧与避坑提示
- 在 .vscode/settings.json 中加 "eslint.validate": ["javascript", "typescript", "typescriptreact"]，避免 TSX 文件不被检查
- 真机调试 Android 时，确保开启 USB 调试 + 安装了对应架构的 APK（如 arm64-v8a）
- 遇到 Unable to load script，先检查 Metro 是否运行（npx react-native start）、端口是否被占（默认 8081）
- 想看原生日志？在 VSCode 终端运行 npx react-native log-android 或 log-ios
- 使用 React Native Tools 插件的命令面板（Ctrl+Shift+P）可快速刷新、切换开发服务器、重载 JS、显示性能监视器
基本上就这些。配置一次，后续新建项目基本复用。不复杂但容易忽略细节，尤其环境变量和 adb 权限——搞定它们，VSCode 就是 React Native 开发最顺手的搭档。
