使用 VSCode 进行安卓开发的三种主要方式

本文介绍了使用VSCode进行安卓开发的四种主要方法：1) Flutter开发（官方推荐），包括环境搭建、插件安装和项目创建；2) React Native开发，涵盖环境配置、插件选择和调试设置；3) 原生安卓开发（Java/Kotlin），详细说明环境变量配置和项目创建方式；4) Ionic/Capacitor开发，简要说明其搭建流程。每种方法都提供了具体的命令行操作和VSCode插件推荐，并包

jjj_web

1430人浏览 · 2026-01-28 14:00:00

jjj_web · 2026-01-28 14:00:00 发布

🎯 使用 VSCode 进行安卓开发的三种主要方式

一、Flutter 开发（官方推荐）

1. 环境搭建步骤

# 1. 安装 Flutter SDK
# 下载：https://flutter.dev/docs/get-started/install
# 解压到：C:\src\flutter

# 2. 配置环境变量
setx PATH "%PATH%;C:\src\flutter\bin"

# 3. 安装 Android SDK（如未安装）
# 方法一：安装 Android Studio
# 方法二：单独安装 SDK
# https://developer.android.com/studio#command-tools

# 4. 运行环境检查
flutter doctor

2. VSCode 插件安装

必需插件：
1. Dart (Dart Code) - 官方插件
2. Flutter - 官方插件
3. Awesome Flutter Snippets - 代码片段
4. Flutter Widget Snippets - Widget 片段
5. Flutter Tree - Widget 树查看器

可选插件：
- Error Lens - 错误高亮
- Pubspec Assist - 依赖管理
- Flutter Files - 快速生成文件

3. Flutter 项目创建与运行

# 创建项目
flutter create my_app

# 打开项目
code my_app

# VSCode 内操作
F5 - 启动调试
Ctrl+Shift+P → "Flutter: Run" - 运行
Ctrl+Shift+P → "Flutter: Select Device" - 选择设备

二、React Native 开发

1. 环境搭建

# 1. 安装 Node.js (16+)
# https://nodejs.org

# 2. 安装 React Native CLI
npm install -g react-native-cli

# 3. 安装 Android Studio 和 SDK
# 必须安装：Android SDK, Android SDK Platform, Android Virtual Device

# 4. 配置环境变量
setx ANDROID_HOME "C:\Users\%USERNAME%\AppData\Local\Android\Sdk"
setx PATH "%PATH%;%ANDROID_HOME%\platform-tools"
setx PATH "%PATH%;%ANDROID_HOME%\tools"
setx PATH "%PATH%;%ANDROID_HOME%\emulator"

2. VSCode 插件

必需插件：
1. React Native Tools - 微软官方
2. React Native Snippet
3. ES7+ React/Redux/React-Native snippets
4. Prettier - Code formatter

可选插件：
- React Native Navigator
- React-Native/React/Redux snippets
- Auto Rename Tag

3. 项目配置

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    },
    {
      "name": "Run Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "runArguments": ["--no-packager"]
    }
  ]
}

4. 快速开始

# 创建新项目
npx react-native init MyApp

# 启动 Metro 打包器
npx react-native start

# 新终端运行安卓
npx react-native run-android

# 或使用 VSCode 命令面板
# Ctrl+Shift+P → "React Native: Run Android"

三、原生安卓开发（Java/Kotlin）

1. 环境配置

# 必需组件：
1. Java JDK 11+（推荐 17）
2. Android SDK（通过 Android Studio 或独立安装）
3. Gradle

# 环境变量：
JAVA_HOME = C:\Program Files\Java\jdk-17
ANDROID_HOME = C:\Users\%USERNAME%\AppData\Local\Android\Sdk
GRADLE_HOME = C:\gradle-8.2
PATH 添加：%JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin

2. VSCode 插件

Java 开发：
1. Language Support for Java(TM) by Red Hat
2. Debugger for Java
3. Java Test Runner
4. Maven for Java
5. Gradle for Java

Kotlin 开发：
1. Kotlin Language
2. Kotlin Debug Adapter
3. KotlinX

安卓特定：
1. Android iOS Toolbox - 资源处理
2. XML Tools - XML 格式化
3. Android ADB Tools - ADB 命令
4. Android Virtual Device Manager - AVD 管理

3. 项目创建

# 方法1：使用 Gradle 创建
gradle init --type java-application

# 方法2：从 Android Studio 导出
# 在 Android Studio 创建项目，然后用 VSCode 打开

# 方法3：使用模板
# 克隆模板项目：
git clone https://github.com/android/sunflower
code sunflower

4. 配置示例

// .vscode/settings.json
{
  "java.configuration.updateBuildConfiguration": "automatic",
  "java.home": "C:\\Program Files\\Java\\jdk-17",
  "java.jdt.ls.vmargs": "-Xmx4G",
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true,
    "bin/": true,
    "build/": true
  }
}

四、Ionic/Capacitor 开发

1. 环境搭建

# 1. 安装 Node.js
# 2. 安装 Ionic CLI
npm install -g @ionic/cli

# 3. 安装 Capacitor
npm install -g @capacitor/cli

# 4. 安卓环境（同前）

2. VSCode 插件

必需插件：
1. Ionic Snippets
2. Angular Language Service（如果使用 Angular）
3. JavaScript (ES6) code snippets
4. HTML CSS Support

3. 项目创建

# 创建 Ionic 项目
ionic start myApp tabs --type=angular
# 或
ionic start myApp blank --type=react
# 或
ionic start myApp tabs --type=vue

# 添加安卓平台
cd myApp
npm install @capacitor/android
npx cap add android
npx cap sync

五、调试配置详解

1. Flutter 调试配置

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": ["--dart-define=ENV=dev"]
    },
    {
      "name": "Flutter (Profile Mode)",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "flutterMode": "profile"
    },
    {
      "name": "Flutter (Release Mode)",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "flutterMode": "release"
    }
  ]
}

2. React Native 调试配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/*"
      }
    },
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach"
    }
  ]
}

3. Java/Kotlin 调试配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "java",
      "name": "Debug Android App",
      "request": "launch",
      "mainClass": "com.example.MainActivity",
      "projectName": "MyAndroidApp",
      "args": "",
      "vmArgs": "-Djava.library.path=${workspaceFolder}/libs"
    }
  ]
}

六、任务自动化配置

1. 构建任务

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build APK",
      "type": "shell",
      "command": "cd android && ./gradlew assembleDebug",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "Clean Build",
      "type": "shell",
      "command": "cd android && ./gradlew clean",
      "group": "build"
    },
    {
      "label": "Install APK",
      "type": "shell",
      "command": "adb install -r android/app/build/outputs/apk/debug/app-debug.apk"
    }
  ]
}

2. Flutter 任务

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Flutter: Get Packages",
      "type": "shell",
      "command": "flutter pub get",
      "options": {
        "cwd": "${workspaceFolder}"
      }
    },
    {
      "label": "Flutter: Build APK",
      "type": "shell",
      "command": "flutter build apk --split-per-abi",
      "options": {
        "cwd": "${workspaceFolder}"
      }
    }
  ]
}

七、模拟器集成

1. VSCode 模拟器扩展

推荐扩展：
1. Android iOS Emulator - 启动/管理模拟器
2. ADB Interface - ADB 命令集成
3. Device Preview - 设备预览

使用方法：
Ctrl+Shift+P → "Emulator: Start Android Emulator"
Ctrl+Shift+P → "Emulator: Pick Android Device"

2. 命令行控制

# 查看可用模拟器
emulator -list-avds

# 启动模拟器
emulator -avd Pixel_5_API_33 -gpu host

# 在 VSCode 终端中直接运行

3. ADB 集成

// 通过 VSCode 命令面板
"Ctrl+Shift+P" 然后输入：
- "ADB: Connect Device"
- "ADB: Disconnect Device"
- "ADB: Install APK"
- "ADB: Uninstall APK"
- "ADB: Restart ADB Server"

八、推荐工作区设置

1. 通用设置

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "files.autoSave": "afterDelay",
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
  }
}

2. 语言特定设置

{
  // Java/Kotlin
  "java.format.settings.url": ".vscode/java-formatter.xml",
  "java.import.gradle.enabled": true,
  "java.configuration.checkProjectSettingsExclusions": false,
  
  // JavaScript/TypeScript
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  
  // Flutter/Dart
  "dart.lineLength": 80,
  "flutter.createTests": true,
  "flutter.showInspectorNotifications": false,
  
  // React Native
  "react-native-tools.showUserTips": false,
  "react-native-tools.packager.autoStart": true
}

九、性能优化技巧

1. VSCode 性能优化

// settings.json
{
  "editor.minimap.enabled": false,
  "workbench.editor.enablePreview": false,
  "git.enabled": true,
  "git.autorefresh": false,
  "extensions.ignoreRecommendations": true,
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "update.mode": "manual"
}

2. 内存限制调整

// 创建 .vscode/argv.json（需要重启 VSCode）
{
  "disable-color-correct-rendering": true,
  "disable-crash-reporter": true,
  "disable-renderer-backgrounding": true,
  "max-memory": "8192"
}

3. 排除大文件

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/android/build/**": true,
    "**/ios/Pods/**": true,
    "**/build/**": true
  }
}

十、CI/CD 集成

1. GitHub Actions 示例

# .github/workflows/android.yml
name: Android CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Set up JDK 17
      uses: actions/setup-java@v3
      with:
        java-version: '17'
        distribution: 'temurin'
    
    - name: Build with Gradle
      run: |
        cd android
        chmod +x gradlew
        ./gradlew assembleDebug
    
    - name: Upload APK
      uses: actions/upload-artifact@v3
      with:
        name: app-debug
        path: android/app/build/outputs/apk/debug/app-debug.apk

2. Flutter CI/CD

name: Flutter CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - uses: subosito/flutter-action@v2
      with:
        flutter-version: '3.10.x'
    
    - run: flutter pub get
    - run: flutter analyze
    - run: flutter test
    - run: flutter build apk --split-per-abi

十一、各方案对比

方案	学习曲线	性能	生态	适合场景
Flutter	中等	优秀	良好	跨平台应用、高性能UI
React Native	较低	良好	丰富	Web开发者转移动端
原生 Java/Kotlin	较高	优秀	最丰富	高性能原生应用
Ionic	低	一般	良好	混合应用、PWA

十二、常见问题解决

问题1：环境变量不生效

# 在 VSCode 中重新加载环境
Ctrl+Shift+P → "Developer: Reload Window"

# 或重启 VSCode
# 检查终端是否使用正确的 shell
# 查看集成终端设置：Ctrl+,

问题2：插件冲突

# 禁用所有插件，逐个启用
code --disable-extensions

# 或创建专用工作区配置文件
code --user-data-dir ~/.vscode-android

问题3：构建失败

# 清理缓存
# Flutter
flutter clean
rm -rf .dart_tool

# React Native
cd android && ./gradlew clean
cd .. && rm -rf node_modules && npm install

# Java/Kotlin
./gradlew cleanBuildCache

十三、推荐项目结构

Flutter 项目

my_flutter_app/
├── lib/
│   ├── main.dart
│   ├── models/
│   ├── services/
│   ├── views/
│   ├── view_models/
│   └── utils/
├── android/       # 安卓原生代码
├── ios/           # iOS 原生代码
├── test/
└── pubspec.yaml

React Native 项目

my_rn_app/
├── src/
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   ├── services/
│   ├── utils/
│   └── assets/
├── android/       # 安卓原生代码
├── ios/           # iOS 原生代码
└── package.json

十四、学习资源

官方文档

课程推荐

免费课程：
- Flutter: https://flutter.dev/learn
- React Native: https://reactnative.dev/docs/getting-started
- VSCode 教程：https://code.visualstudio.com/docs/getstarted/introvideos

付费平台：
- Udemy: Flutter & Dart 完整指南
- Pluralsight: React Native 路径
- Coursera: 安卓开发专项课程

社区资源

Stack Overflow: flutter, react-native 标签
GitHub: 官方示例仓库
Reddit: r/FlutterDev, r/reactnative
Discord: Flutter, React Native 社区

总结

使用 VSCode 开发安卓的优势：

✅ 轻量快速：启动快，占用资源少
✅ 高度可定制：插件丰富，主题多样
✅ 跨平台一致：Windows/macOS/Linux 体验相同
✅ 开源免费：完全免费使用
✅ 现代化开发：支持最新的开发工具链

选择建议：

新手/快速开发：推荐 Flutter 或 React Native
Web 开发者：推荐 React Native
追求性能：推荐 Flutter 或 原生开发
企业应用：根据团队技能选择

配置清单：

✅ Node.js 安装
✅ Java JDK 安装
✅ Android SDK 配置
✅ VSCode 安装
✅ 相关插件安装
✅ 模拟器配置

快速验证环境：

# Flutter
flutter doctor

# React Native
npx react-native doctor

# Java
java -version
javac -version

# Android
adb devices

提示：虽然 VSCode 可以完成大部分开发工作，但对于复杂的原生模块开发，可能需要配合 Android Studio。建议两者结合使用，发挥各自优势。

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

进阶实战 Flutter for OpenHarmony：webview_flutter 第三方库实战 - 智能内嵌浏览器系统

开源鸿蒙跨平台开发者社区

进阶实战 Flutter for OpenHarmony：InteractiveViewer 组件实战 - 图片手势缩放查看系统

在移动应用中，图片查看是一个非常常见的功能。当用户查看一张高清图片时，往往需要放大查看细节，或者缩小查看全貌。传统的图片查看方式通常需要点击按钮来放大缩小，操作不够直观和便捷。手势缩放查看提供了一种更加自然和直观的交互方式。用户可以使用双指手势来缩放图片，使用单指手势来平移图片，甚至可以双击快速放大到指定比例。这种交互方式符合用户的直觉，大大提升了查看体验。这就是 InteractiveViewe

开源鸿蒙跨平台开发者社区

进阶实战 Flutter for OpenHarmony：animations 第三方库实战 - 流畅过渡动画系统

开源鸿蒙跨平台开发者社区

所有评论(0)

查看更多评论

jjj_web

@jjj_web

已为社区贡献2条内容

使用 VSCode 进行安卓开发的三种主要方式

jjj_web

目录

🎯 使用 VSCode 进行安卓开发的三种主要方式

一、Flutter 开发（官方推荐）

1. 环境搭建步骤

2. VSCode 插件安装

3. Flutter 项目创建与运行

二、React Native 开发

1. 环境搭建

2. VSCode 插件

3. 项目配置

4. 快速开始

三、原生安卓开发（Java/Kotlin）

1. 环境配置

2. VSCode 插件

3. 项目创建

4. 配置示例

四、Ionic/Capacitor 开发

1. 环境搭建

2. VSCode 插件

3. 项目创建

五、调试配置详解

1. Flutter 调试配置

2. React Native 调试配置

3. Java/Kotlin 调试配置

六、任务自动化配置

1. 构建任务

2. Flutter 任务

七、模拟器集成

1. VSCode 模拟器扩展

2. 命令行控制

3. ADB 集成

八、推荐工作区设置

1. 通用设置

2. 语言特定设置

九、性能优化技巧

1. VSCode 性能优化

2. 内存限制调整

3. 排除大文件

十、CI/CD 集成

1. GitHub Actions 示例

2. Flutter CI/CD

十一、各方案对比

十二、常见问题解决

问题1：环境变量不生效

问题2：插件冲突

问题3：构建失败

十三、推荐项目结构

Flutter 项目

React Native 项目

十四、学习资源

官方文档

课程推荐

社区资源

总结

使用 VSCode 开发安卓的优势：

选择建议：

配置清单：

快速验证环境：

所有评论(0)

jjj_web