VS Code：适用于 Flutter、React Native 和 Ionic 的编辑器

什么是 VS Code？

VS Code ——微软于 2015 年发布的源代码编辑器。与 Visual Studio 不同，VS Code 不是一个完整的 IDE ——它是一个轻量级编辑器，可通过扩展扩展为 IDE 级别。对于移动开发，VS Code 支持 Flutter（通过 Dart Code 扩展）、React Native（通过 React Native Tools 扩展）和 Ionic（通过内置 TypeScript 支持）。

根据 Stack Overflow Developer Survey 2025 的数据，74% 的开发者使用 VS Code，使其成为全球最流行的编辑器。对于移动开发，68% 的 Flutter 开发者、55% 的 React Native 开发者和 71% 的 Ionic 开发者选择它。主要原因：运行速度、可扩展性、内置 Git 和终端。

VS Code 架构基于 Language Server Protocol (LSP) 实现自动补全和诊断、Debug Adapter Protocol (DAP) 实现调试以及 VSIX 格式的扩展。编辑器运行在 Electron（Chromium + Node.js）上，允许使用 JavaScript/TypeScript 创建扩展。VS Code 适用于 Windows、macOS 和 Linux。

为移动开发配置 VS Code

针对移动开发的基本VS Code 配置包括安装针对特定框架的扩展包。对于 Flutter，Flutter 扩展就足够了（Dart 会自动安装）。对于 React Native ——React Native Tools。对于使用 TypeScript 的 Ionic/React Native ——内置支持立即可用，但建议安装 ESLint 和 Prettier。

// .vscode/settings.json — 移动项目设置
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

移动开发扩展：Flutter (Dart Code, 50M+ 安装)、React Native Tools (Microsoft, 10M+)、Expo（用于 React Native Expo）、Thunder Client (API 测试)、GitLens (Git 可视化)、Error Lens (内联错误)、Material Icon Theme (文件图标)。还建议安装 Code Runner 以快速运行脚本。

工作区配置 (.code-workspace) 允许在单个 VS Code 窗口中分组相关项目。对于单一代码库（例如 React Native + Backend），工作区会打开所有文件夹及其设置、扩展和启动配置。VS Code 会自动检测工作区中的项目并在资源管理器中显示它们。

Flutter 在 VS Code 中

Flutter 扩展为 VS Code 提供了一套完整的开发工具：创建项目 (Ctrl+Shift+P → Flutter: New Project)、热重载 (Hot Reload, Hot Restart)、UI 检查器 (Flutter Inspector)、模拟器/设备 (Flutter: Select Device)、DevTools (widget 树、时间线、网络、内存)。

// lib/main.dart — 带导航功能的 Flutter 应用
import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: 'VS Code Example',
        home: HomePage(),
        theme: ThemeData.useMaterial3(),
    ));
}

class HomePage extends StatelessWidget {
    HomePage({super.key});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Flutter + VS Code')),
            body: Center(
                child: ElevatedButton(
                    onPressed: () => debugPrint('Hello from VS Code!'),
                    child: Text('Tap here'),
                ),
            ),
        );
    }
}

Dart DevTools在 VS Code 中可以以编辑器内选项卡或独立窗口的形式启动。DevTools 包括 Flutter Inspector（带布局覆盖层的 widget 树）、Performance（FPS、帧构建/渲染）、CPU Profiler（Flutter/调度器/手势）、Memory（堆快照、GC、分配）、Network（HTTP 请求）和 Logging（dart:developer log、stderr）。

React Native 在 VS Code 中

React Native Tools——微软官方扩展，用于调试 React Native 应用。支持在 Android 模拟器、iOS 模拟器和物理设备上运行，带断点的 JavaScript 调试，通过 Flipper 检查元素，以及与 Expo 集成实现快速开发。

React Native 配置：该扩展添加了命令：React Native: Start Packager、Run Android、Run iOS、Attach to Packager、Debug。对于 Hermes 调试，使用 React Native Hermes Debugger。VS Code 支持 Flipper 集成——Reactotron 插件用于监控网络、Redux/NgRx 状态、异步存储、console.log。

// App.tsx — 带导航功能的 React Native 组件
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
    Home: undefined;
    Details: { itemId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

ESLint + Prettier——VS Code 中 TypeScript 的必备组合。ESLint 检查代码语义（no-unused-vars、@typescript-eslint/ban-ts-comment），Prettier 格式化缩进、引号、逗号。配置保存在 .eslintrc.js 和 .prettierrc 中。VS Code 在保存时自动运行 ESLint 并内联高亮错误。

Ionic 在 VS Code 中

Ionic——基于 Angular、React 或 Vue 的混合移动应用框架。VS Code 提供内置的 TypeScript 支持、Angular Language Service（用于 .html 模板）以及通过 Ionic Snippets 扩展的 Ionic 组件自动补全。编译和发布使用 Capacitor（Cordova 的后继者）。

Ionic CLI 集成在 VS Code 中：内置终端运行 ionic serve 用于浏览器开发、ionic build 用于生产环境、ionic cap sync 用于与原生平台同步。Ionic Extension 扩展添加了一个包含命令的面板：Generate Page、Generate Component、Run on Android/iOS。

Capacitor 插件——Web 代码与原生 API 之间的桥梁。主要插件：Camera、Geolocation、Push Notifications、File System、Storage。每个插件都有统一的 JS API 以及 Android (Java/Kotlin) 和 iOS (Swift) 的原生实现。VS Code 通过 TypeScript 定义为 Capacitor API 提供自动补全。

Launch.json 和调试

launch.json——.vscode/ 文件夹中的 VS Code 调试器配置。对于移动项目，launch.json 定义了启动类型：Flutter (dart)、React Native (reactnative)、Ionic (chrome 或 edge 用于浏览器调试)。每个配置包含参数：program、args、cwd、env、platform、deviceId。

// .vscode/launch.json — Flutter 和 React Native 的配置
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter (Android)",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "deviceId": "emulator-5554",
            "args": ["--dart-define=ENV=staging"]
        },
        {
            "name": "React Native (Android)",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "sourceMaps": true
        },
        {
            "name": "Ionic (Browser)",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "webRoot": "\${workspaceFolder}"
        }
    ]
}

多目标调试在 VS Code 中——并行运行多个配置 (compounds)。例如，Flutter DevTools + Flutter App 自动打开检查器。对于 React Native，使用 Attach to Packager——首先启动 Metro bundler，然后调试器连接到已在运行的应用。

远程开发通过 Dev Containers：VS Code 连接到预安装了 SDK (Flutter、Android、Node.js) 的 Docker 容器或 WSL2。Dev Containers 扩展（原名 Remote — Containers）在隔离环境中启动项目，包含模拟器和调试器在内的全套工具。