需为Flutter或React Native配置VSCode开发环境:Flutter需安装SDK、配置PATH、运行flutter doctor并安装Dart/Flutter插件;React Native需安装Node.js、JDK、Android SDK,并安装React Native Tools插件;真机调试需分别配置iOS签名与Android ADB连接。

如果您希望在VSCode中进行移动应用开发,需要为Flutter或React Native框架配置相应的开发环境。以下是针对这两种主流跨平台框架的详细配置步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、配置Flutter开发环境
Flutter SDK包含编译器、调试工具和Dart语言支持,需手动安装并集成至VSCode。完成配置后,VSCode可通过Flutter和Dart插件提供语法高亮、代码补全与热重载功能。
1、访问Flutter官网下载对应macOS的SDK压缩包。
2、解压至用户主目录下的development文件夹,并重命名为flutter。
3、在终端中执行export PATH=$PATH:$HOME/development/flutter/bin,并将该行添加至~/.zshrc文件末尾。
4、运行flutter doctor检查依赖项,按提示安装Xcode命令行工具、CocoaPods及Android Studio SDK。
5、打开VSCode,进入扩展市场搜索并安装Dart与Flutter两个官方插件。
二、配置React Native开发环境
React Native依赖Node.js、JDK、Android SDK或Xcode原生构建工具,VSCode本身不参与编译,但需配置调试器与类型支持以提升开发效率。
1、使用Homebrew安装Node.js:brew install node。
2、安装OpenJDK 17:brew install openjdk@17,并设置JAVA_HOME环境变量指向其libexec/openjdk.jdk路径。
3、通过Android Studio安装Android SDK Platform-Tools、SDK Build-Tools与Android Emulator。
4、在VSCode扩展市场中安装React Native Tools与ESLint插件。
5、创建新项目时使用npx react-native init MyApp,确保项目根目录下存在jsconfig.json或tsconfig.json以启用智能提示。
三、启用iOS真机调试支持(Flutter)
Flutter默认仅支持模拟器调试,若需在物理iOS设备上运行,必须配置Apple开发者账号与签名证书,使Xcode能识别并部署应用。
1、使用Apple ID登录Xcode的Preferences > Accounts面板。
2、在项目目录下运行open ios/Runner.xcworkspace,用Xcode打开工作区。
3、选择Runner目标,在Signing & Capabilities选项卡中勾选Automatically manage signing。
4、连接iOS设备并信任该电脑,Xcode将自动安装描述文件与开发证书。
5、返回VSCode,按下Ctrl+Shift+P调出命令面板,输入并选择Flutter: Select Device,确认设备已列出。
四、启用Android真机调试支持(React Native)
Android真机调试需启用设备的USB调试模式,并通过ADB建立稳定连接,VSCode依赖此连接启动调试会话与日志输出。
1、在Android设备中连续点击关于手机 > 版本号七次,开启开发者选项。
2、进入设置 > 开发者选项,启用USB调试与USB安装。
3、使用USB线连接设备后,在终端运行adb devices,确认设备序列号出现在列表中。
4、在VSCode中打开React Native项目,按下Cmd+Shift+P,输入并选择React Native: Run Android on Device。
5、首次运行时,系统可能提示安装React Native Debugger,请从官网下载并配置其端口与VSCode调试器联动。










