使用VSCode进行React Native移动应用开发与调试

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 即可完成真机/模拟器调试：

工资查查移动工资条

大部分的工资还是以打印工资条的形式进行，偶有公司使用邮件发放工资条，而工资条的现代形式应该是移动工资条，以实现信息的备忘、到达、管理、对帐、环保、高效等需求……，用户已经习惯使用手机（或以其它移动方式）实现一切需求，应用的移动化是大势所趋。工资查查就在这样的背景下诞生，北京亦卓科技于2017的开发并推出了微信小程序工资查查。由于对有用户对数据隐私与安全性的考虑，北京亦卓科技在推出了云端应用--工资

0

查看详情

• 确保 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 的编辑功能，专注逻辑开发与问题定位。

以上就是使用VSCode进行React Native移动应用开发与调试的详细内容，更多请关注php中文网其它相关文章！