VS Code 搭建 React Native 开发环境（Windows 实战指南）

本文只关注VS Code 下运行 React Native（Android）的完整配置，包括插件、环境变量与调试方式。不涉及 Android Studio 安装过程。

---

一、目标

在 VS Code 中实现：

• 运行 React Native 项目

• 代码规范（ESLint + Prettier）

• 支持调试（Hermes）

• 提升开发效率

---

二、必装 VS Code 插件

在 Visual Studio Code 扩展市场安装以下插件：

---

1. React Native Tools（必须）

React Native Tools

功能：

• 运行 React Native 项目

• 连接调试（Hermes）

• 日志查看

---

2. ESLint（代码质量）

ESLint

功能：

• 实时语法检查

• 统一代码风格

• 避免低级错误

---

3. Prettier（代码格式化）

Prettier

功能：

• 自动格式化代码

• 与 ESLint 配合使用

---

三、核心问题

在 VS Code 终端运行：

npx react-native run-android

依赖：

组件	作用
adb	设备通信
emulator	启动模拟器
Java（JDK）	Gradle 构建

👉 未配置会报错：

• adb 不是内部命令

• JAVA_HOME is not set

• No emulators found

---

四、环境变量配置（关键）

---

1. ANDROID_HOME

ANDROID_HOME = D:\7_Programs\Android\Sdk

---

2. JAVA_HOME

JAVA_HOME = D:\7_Programs\Android Studio\jbr

---

3. Path 配置

D:\7_Programs\Android\Sdk\platform-tools D:\7_Programs\Android\Sdk\emulator D:\7_Programs\Android Studio\jbr\bin

---

⚠️ 注意

• 使用完整路径（避免变量展开问题）

• 修改后必须重启 VS Code

---

环境变量配置截图

---

五、验证环境

adb version emulator -list-avds java -version

---

验证

PS D:\1_Project\Android\AwesomeProject> adb version Android Debug Bridge version 1.0.41 Version 37.0.0-14910828 Installed as D:\7_Programs\Android\Sdk\platform-tools\adb.exe Running on Windows 10.0.26200 PS D:\1_Project\Android\AwesomeProject> emulator -list-avds Pixel_10 PS D:\1_Project\Android\AwesomeProject> java -version java version "21.0.11" 2026-04-21 LTS Java(TM) SE Runtime Environment (build 21.0.11+9-LTS-211) Java HotSpot(TM) 64-Bit Server VM (build 21.0.11+9-LTS-211, mixed mode, sharing)

---

六、运行项目

cd D:\1_Project\Android\AwesomeProject npx react-native run-android

---

成功标志

BUILD SUCCESSFUL Installing APK... Starting: Intent ...

---

运行效果

---

七、VS Code 调试配置（推荐）

---

❌ 不推荐方式

"type": "reactnative"

问题：

• Windows 下易出现spawn EINVAL

---

✅ 推荐方式（Attach 模式）

.vscode/launch.json：

{ "version": "0.2.0", "configurations": [ { "name": "Attach to Hermes", "type": "reactnativedirect", "request": "attach", "cwd": "${workspaceFolder}", "platform": "android" } ] }

---

使用流程

1. 终端运行 run-android 2. VS Code 按 F5 3. 连接调试

---

八、常见问题

---

1. JAVA_HOME 未生效

👉 重新打开 VS Code

---

2. adb 找不到

👉 检查 platform-tools 是否加入 Path

---

3. spawn EINVAL

👉 不用 F5 启动项目，改用终端

---

至此，你已经完成一套稳定、可扩展的 React Native 开发环境。

最后：

Android Studio安装教程：https://blog.csdn.net/summer___cold/article/details/135421493