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