VSCode是本地高效开发Flutter应用的轻量选择，需配置Flutter SDK、安装Dart/Flutter插件、创建项目、启用热重载与断点调试，并通过launch.json支持多平台调试。
如果您希望在本地环境中高效学习和开发Flutter应用，VSCode是一个轻量且功能强大的选择。它通过插件扩展提供了代码补全、调试支持、热重载集成等关键能力。以下是具体配置与使用步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Flutter SDK与配置环境变量
Flutter SDK是开发的基础运行时，必须正确下载并加入系统路径，否则VSCode无法识别Flutter命令及设备连接状态。
1、访问 https://flutter.dev/docs/get-started/install 下载对应 macOS 的 Flutter SDK 压缩包。
2、解压至用户主目录下的 /Users/用户名/flutter 路径。
3、在终端中编辑 ~/.zshrc 文件，添加以下两行：
export PATH=$PATH:/Users/用户名/flutter/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn
4、执行 source ~/.zshrc 使配置生效，随后运行 flutter doctor 验证安装结果。
二、安装VSCode及Dart与Flutter插件
VSCode本身不内置Flutter支持，需通过官方维护的扩展提供语言服务、调试器和项目模板生成能力。
1、前往 https://code.visualstudio.com/ 下载并安装最新版 VSCode。
2、启动 VSCode，点击左侧扩展图标（或按 Cmd+Shift+X），搜索 Dart，安装由 Dart Code 团队发布的 Dart 扩展。
3、在同一扩展面板中搜索 Flutter，安装同团队发布的 Flutter 扩展（该扩展会自动依赖并启用 Dart 扩展）。
4、重启 VSCode，打开命令面板（Cmd+Shift+P），输入 Flutter: New Project 测试插件是否响应。
三、创建并运行首个Flutter项目
使用VSCode内置命令可快速初始化标准项目结构，并避免手动执行 flutter create 命令可能出现的路径或权限问题。
1、按下 Cmd+Shift+P 打开命令面板，输入并选择 Flutter: New Project。
2、在弹出的输入框中键入项目名称（如 my_first_app），回车确认。
3、选择项目保存位置（建议为用户文档目录下的独立文件夹），等待模板生成完成。
4、项目生成后，VSCode 自动打开该文件夹，点击右下角状态栏中的 No Device，选择已连接的 iOS 模拟器或 Android 设备。
5、按下 Cmd+F5 启动调试，或点击侧边栏“运行和调试”面板中的绿色三角形按钮。
四、启用热重载与调试断点
热重载是Flutter开发的核心效率特性，VSCode通过调试会话实时注入代码变更，无需重启应用；断点则用于逐行分析逻辑执行流程。
1、确保当前处于 lib/main.dart 文件中，点击左侧行号区域设置断点（红色圆点）。
2、按下 Cmd+F5 启动调试会话，应用启动后会在断点处暂停。
3、修改某段 Widget 构建逻辑（例如将 'Hello World' 改为 'Hello VSCode'）。
4、按下 Cmd+S 保存文件，观察模拟器界面立即刷新，且控制台输出 Performing hot reload... 日志。
五、配置launch.json实现多目标调试
默认调试配置仅面向默认设备，若需指定iOS模拟器型号、Android真机或Web平台，需手动定义 launch.json 配置项以覆盖默认行为。
1、在项目根目录下依次展开 .vscode > launch.json（若不存在则点击运行面板右上角齿轮图标生成）。
2、将 configurations 数组中已有对象替换为以下内容：
{
"name": "Flutter Web",
"request": "launch",
"type": "dart",
"flutterMode": "debug",
"args": ["-d", "chrome"]
}
3、保存文件后，在调试选择器中切换至 Flutter Web，再次按 Cmd+F5 即可在 Chrome 中运行。
4、如需调试特定 iOS 模拟器，将 args 中的 "chrome" 替换为 "iPhone 15"（需确保该模拟器已通过 Xcode 创建并运行）。
